jquery的attr

HaC

发布于 2020-12-30 17:33:21

1.1K00

代码可运行

文章被收录于专栏：HaC的技术专栏HaC的技术专栏

运行总次数：0

代码可运行

设置属性的值

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr({width:"50",height:"80"});//设置多个属性
    //$("img").attr("width","180");设置一个属性
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>

小彩蛋：设置属性的值还可以使用CSS()方法，如：

$(document).ready(function(){
  $("button").click(function(){
    $("p").css({width:"50",height:"80"});
  });
});

该方法和上面的效果一样。

2. 获取属性的值

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert("Image width " + $("img").attr("width"));
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>返回图像的宽度</button>
</body>
</html>

总结： $(selector).attr(attribute,value) 若value不为空则设置该selector的属性；若value为空则获取该selector的属性值。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/10/20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

attr