javascript - 请教大神JQ中attr（）和css（）的区别？我老是分不清楚，谢谢！

Question

JQ中css（）可以修改html中的文字颜色 字体，attr（）也可以吗？还是他只可以修改特定元素的属性，谢谢！

Answer 1

attr可以修改html标签上展示为xxx=""任意属性值，css只能修改属性名为style的值，也就是style=""里面的值

Answer 2

不太严格地说：

1. attr()是操作元素的属性。

2. css()是操作元素的style属性。

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

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

Answer 3

css 针对 style 属性 attr 可改所有属性，jquery 可以帮您少写点代码

Answer 4

jQuery中
css()方法是获取/修改样式属性(和style有关)的
attr()是获取/修改元素的属性(和Html标签有关)的,比如下面的:
Html

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

Javascript

<script type="text/javascript">
$(function(){
    //css()
   var color = $("#a").css("color"); //只有一个参数时，是获取p#a的color，返回red

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

Answer 5

attr函数是获取或修改属性
任何写作HTML标签里的属性都可以获取或修改，包括你自定义的属性，比如<p flag='1'></p>
不能修改样式
比如img标签的src属性等
css函数是修改其样式，不过即便style里是12px的大小，css函数也可以改变为14或其他
可以理解为css函数直接操作的是style里的样式

Answer 6

还有个prop呢，哈哈

Answer 7

你在css里头能写img的src属性吗？( ^_^ )

Answer 8

简单的说，如果你要设置一个元素的 style="display:none"，那么 .css 你要这样写：

$('#elem').css('display', 'none');
// 约等于
document.getElementById('elem').style.display = 'none';

使用 attr 你就得这样写：

var elem = $('#elem');
style = elem.attr('style') || '';
elem.attr('style', style + ';display:none;');
// 约等于
var elem = document.getElementById('elem'),
style = elem.cssText || '';
elem.cssText += ';display:none;';

.attr('style') 得到的是字符串，而 .css 操作的是对象