Rumah  >  Artikel  >  hujung hadapan web  >  jQuery中css()和attr()方法的区别

jQuery中css()和attr()方法的区别

不言
不言asal
2018-07-09 14:58:281643semak imbas

这篇文章主要介绍了关于jQuery中css()和attr()方法的区别,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

方法介绍:

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>

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代码:

8ff673b3b5d119a5bd586bd83c45c70b94b3e26ee717c64999d7867364b1b4a3

jQuery代码:

8019067d09615e43c7904885b5246f0a
    var oBox = $("#box");
    console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的
2cacc6d41bbb37262a98f745aa00fbf0

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

JS字符串转数字的方法

通过Vue属性$route的params传参

jQuery源码之Callbacks的学习

Atas ialah kandungan terperinci jQuery中css()和attr()方法的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn