這篇文章主要介紹了關於jQuery中css()和attr()方法的區別，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
html程式碼：
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
jQuery程式碼：
<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>html程式碼：
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
jQuery程式碼：
<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><p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
<script type="text/javascript">
var oBox = $("#box");
//这里有一个重置了行内的style样式的现象，background-color不再有效
oBox.attr("style", "width: 310px;height: 110px");
</script>拓展:
css()方法是取得/修改樣式屬性(和style有關)的方法；
attr()是取得/修改元素的屬性(和Html標籤有關)的方法;
attr()和css()對style的運算都是針對行內樣式。
- style也是元素的屬性，
attr()同樣可以對他進行操作，所以在功能上css()可以看成是attr()的子集。
attr()操作回傳的是string，css()操作回傳的是object。
prop()方法是取得/修改元素的自有屬性的方法，不包含自訂的屬性。 html程式碼：
<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>
<script type="text/javascript">
var oBox = $("#box");
console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的
</script>以上是jQuery中css()和attr()方法的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
