返回被选元素的属性值:$(selector).attr(attribute)
设置被选元素的属性和值:$(selector).attr(attribute,value)
设置一个以上的属性和值:$(selector).attr({attribute:value, attribute:value ...})
<script type="text/javascript"> $("button").click(function(){ $("#p1").attr("title","我是div1"); alert($("#p1").attr("title")); }); </script> <div id="p1" style="background-color:red" >段落1</div> <button>返回图像的宽度</button>
网上有这样的说法:css()是用来操纵style{}的,而attr()是加在标签内部的。【我是对的】
so:如<img>标签,attr()的权重比css()要大,它会覆盖css()的样式。【我是错的】
http://jsfiddle.net/t4m2tkxa/1/
<script type="text/javascript"> $(document).ready(function () { $("#button1").click(function () { $("img").attr("width", "180"); }); $("#button2").click(function () { $("img").css("width","20"); }); }); </script> <img src="/i/eg_smile.gif" width="280"/> <br /> <button id="button1">通过attr()设置图像的 width 属性</button> <button id="button2">通过css()设置图像的 width 属性</button>
但是测试结果显示:
此时,先点击按钮1图片宽度改变再点击按钮2图片宽度再次改变。
先点击按钮2图片宽度改变再点击按钮1图片宽度不发生改变。
为什么呢?原来是理解有偏差:attr()是修改获取属性,css()是修改获取样式。
css()作用后:<img src="/i/eg_smile.gif" style="width: 280px" width="280"/>
attr()作用后:<img src="/i/eg_smile.gif" width="180"/>