jquery css()和attr()的区别是什么-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

区别：attr()主要是针对元素的属性进行操作（和Html标签有关），如img的src属性和alt属性，a链接的href属性等等；而css()修改的是样式里面的属性（和style有关），即是style里面的属性。

本教程操作环境：windows7系统、jquery1.10.0版本、Dell G3电脑。

jquery中有attr()和css()两种方法：

attr是attribute的缩写，意思是标签属性。css是，样式，意思是元素的style样式的。

jquery attr()方法

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

语法

返回属性的值：

1	`$(selector).attr(attribute)`

设置属性和值：

1	`$(selector).attr(attribute,value)`

attribute：规定属性的名称。

value：规定属性的值。

jquery css()方法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

返回第一个匹配元素的 CSS 属性值。

注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

1	`$(selector).css(name)`

name：必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

jquery中attr()与css()的区别

jquery中attr()是获取/修改元素的属性和值(和Html标签有关)；css()是获取/修改元素的样式属性(和style有关)。

attr()主要是针对元素的属性进行操作，如img的src属性和alt属性，a链接的href属性等等；

css()修改的是样式里面的属性，即是style里面的属性。

前者可以修改<img>的src属性，可以修改<a>的href属性，可以修改<input>的title属性。然而后者却不行，他它只能修改样式相关的特征。

所以，后者是前者的子集，只是对 style这个特定的属性进行操作。

示例：

HTML

1	`<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>