attr() ，css() ，setAttribute 三者的区别与使用

本文详细介绍了jQuery中的attr()用于操作标签属性，css()专为样式调整，而setAttribute用于DOM原生操作。attr的范围更广，适用于src、href和title等，而css仅限于style。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

attr() ，css() ，setAttribute 三者的区别与使用

因为我只做后端开发，前端的几乎没有怎么接触，所以经常把jquery跟dom的语法搞混，这不最近attr(),css() setattribute 更是不懂，因此百度一下这边也总结一下。

jquery attr是用来获得或设置标签属性的（attribute的缩写）

  <input name="transtype" id="transtype"   type="text" value="LH-TW" hidden="hidden">
 var myId = $("#transtype"); //获取对象

  myId.attr("width", "180px");//设置属性宽度
var myId = $("#transtype"); //获取对象

  myId.attr("readonly", true);//设置属性宽度

等价于dom setattribute用法

var myId = document.getElementById("transtype");

myId.setAttribute("width", "180px");//设置属性宽度

jquery css是仅设置元素的style样式的 style 有width text-aglin 等

var myId = $("#transtype");

myId.css("background-color", "red");

doument css 操作对应如下


var myId = document.getElementById("myId");

myId.style.backgroundColor = "red"; 

var bg = myId.style.backgroundColor;

三者总结

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

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

总的来说，attr 的范围比 css 的范围要大，attr（）包含css（）。