The difference between css() and attr() methods in jQuery

This article mainly introduces the difference between the css() and attr() methods in jQuery. It has certain reference value. Now I share it with you. Friends in need can refer to the

method introduction:

css():

html code:

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

jQuery code:

<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 code:

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

jQuery code:

<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() can also set the style style:

html Code:

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

jQuery Code:

<script type="text/javascript">
    var oBox = $("#box");
    //这里有一个重置了行内的style样式的现象，background-color不再有效
    oBox.attr("style", "width: 310px;height: 110px");
</script>

Summary:

• ##css()The method is to obtain/modify The method of style attributes (related to style);

• attr() is the method to get/modify the attributes of elements (related to Html tags);

• attr() and css() operate on style both for inline styles.

• style is also an attribute of the element,

  attr() can also be operated on it, so functionally css() can be regarded as Is a subset of attr().

• attr()The operation returns string, and the css() operation returns object.

Extension:

prop() method is a method to obtain/modify the element’s own attributes, excluding custom ones Attributes. html code:

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

jQuery code:

<script type="text/javascript">
    var oBox = $("#box");
    console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的
</script>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Method of converting JS string to number

Passing parameters through the params of the Vue attribute $route

Learning about Callbacks of jQuery source code

The above is the detailed content of The difference between css() and attr() methods in jQuery. For more information, please follow other related articles on the PHP Chinese website!