jQuery中css()和attr()方法的区别
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery中css()和attr()方法的区别,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2401字,纯文字阅读大概需要4分钟。
内容图文
![jQuery中css()和attr()方法的区别](/upload/InfoBanner/zyjiaocheng/286/9a31558dc4e9494bb650360aa155d5bd.jpg)
方法介绍:
css():
html代码:
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
jQuery代码:
<script type="text/javascript"> var oBox = $("#box"); // 只有一个参数时,是获取对应样式的值 console.log($("#box").css("width"));// 返回300px // 两个参数时,是设置对应的样式属性 oBox.css("width", "400"); console.log($("#box").css("width"));// 返回400px // 也支持对象形式进行设置样式 oBox.css({ "width": 500, "height": "500px", "background-color": "yellow" }); </script>
attr():
html代码:
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p> <img src="images/0.jpg" alt="" id="pic">
jQuery代码:
<script type="text/javascript"> var oBox = $("#box"); var oImg = $("#pic"); // 一个参数为读取对应的属性,属性的都可以读取,包括style console.log(oImg.attr("id"));// 返回pic console.log(oImg.attr("src"));// 返回images/0.jpg // 设置p(oBox)上面的width属性为400 console.log(oBox.attr("width", "400")); // 假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 ,如oBox.attr("data-width","100px");,使用这个,oBox的Html元素上面就会新增一个data-width的属性 </script>
attr()同样可以设置style样式:
html代码:
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
jQuery代码:
<script type="text/javascript"> var oBox = $("#box"); //这里有一个重置了行内的style样式的现象,background-color不再有效 oBox.attr("style", "width: 310px;height: 110px"); </script>
总结:
css()方法是获取/修改样式属性(和style有关)的方法;
attr()是获取/修改元素的属性(和Html标签有关)的方法;
attr()和css()对style的操作都是针对行内样式。
style也是元素的属性,attr()同样可以对他进行操作,所以在功能上css()可以看成是attr()的子集。
attr()操作返回的是string,css()操作返回的是object。
拓展:
prop()方法是获取/修改元素的自有属性的方法,不包括自定义的属性。
html代码:
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
jQuery代码:
<script type="text/javascript"> var oBox = $("#box"); console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的 </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
JS字符串转数字的方法
通过Vue属性$route的params传参
jQuery源码之Callbacks的学习
以上就是jQuery中css()和attr()方法的区别的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的jQuery中css()和attr()方法的区别全部内容,希望文章能够帮你解决jQuery中css()和attr()方法的区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。