What is the difference between jquery css() and attr()

Difference: attr() mainly operates on the attributes of elements (related to Html tags), such as the src attribute and alt attribute of img, the href attribute of a link, etc.; while css() modifies The attributes in the style (related to style) are the attributes in the style.

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

There are two methods: attr() and css() in jquery:

attr is the abbreviation of attribute, which means label attribute. css is style, which means the style of the element.

jquery attr() method

attr() method sets or returns the attributes and values ​​of the selected element.

When this method is used to return an attribute value, the value of the first matching element is returned.

When this method is used to set attribute values, one or more attribute/value pairs are set for the matching element.

Syntax

Return the value of the attribute:

$(selector).attr(attribute)

Set the attribute and value:

$(selector).attr(attribute,value)

attribute: Specifies the name of the attribute.

value: Specifies the value of the attribute.

jquery css() method

css() method returns or sets one or more style attributes of the matched element.

Returns the CSS property value of the first matching element.

Note: Shorthand CSS properties (such as "background" and "border") are not supported when used to return a value.

$(selector).css(name)

name: required. Specifies the name of the CSS property. This parameter can contain any CSS property. For example "color".

The difference between attr() and css() in jquery

attr() in jquery is to obtain/modify the attributes and values ​​of elements ( Related to Html tags); css() is to obtain/modify the style attributes of elements (related to style).

attr() mainly operates on the attributes of elements, such as the src attribute and alt attribute of img, the href attribute of a link, etc.;

css() modifies the style. Attributes are the attributes in style.

The former can modify the src attribute of , the href attribute of , and the title attribute of . However, the latter does not work. It can only modify style-related features.

So, the latter is a subset of the former, and only operates on the specific attribute of style.

Example:

HTML

<div style="color:red;font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>

Javascript

<script type="text/javascript">
$(function() {
//css()
var color = $("#a").css("color"); //只有一个参数时，是获取div#a的color，返回red
$("#a").css("color", "blue"); //两个参数时,是设置对应的 样式属性，这里是这只文本color为blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
//attr()
//获取div#a上面的data-id属性的值；当然，style,class,id这三个都可以获取到，因为这些都是Html元素的 属性
var id = $("#a").attr("data-id");
//$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2，
                //假如是一个不存在的属性，使用这个代码，就会添加这个属性到匹配到的元素上面 
               //如$("#a").attr("data-width","100px");,使用这个，div#aHtml元素上面就会新增一个data-width的属性
});
</script>

Summary

css() method is to get/modify style attributes (related to style);

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

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

style is also an attribute of the element, and attr() can also operate on it, so functionally css() can be regarded as a subset of attr().

attr() operation returns string, and css() operation returns object.

Recommended related video tutorials: jQuery Tutorial (Video)

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