jquery css()和attr()的差別是什麼

區別：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() 方法設定或傳回被選元素的屬性和值。

當方法用於傳回屬性值，則傳回第一個符合元素的值。

當方法用於設定屬性值，則為符合元素設定一個或多個屬性/值對。

語法

傳回屬性的值：

$(selector).attr(attribute)

設定屬性和值：

$(selector).attr(attribute,value)

attribute：規定屬性的名稱。

value：規定屬性的值。

jquery css()方法

css() 方法傳回或設定符合的元素的一個或多個樣式屬性。

傳回第一個符合元素的 CSS 屬性值。

註解：當用於傳回一個值時，不支援簡寫的 CSS 屬性（例如 "background" 和 "border"）。

$(selector).css(name)

name：必要。規定 CSS 屬性的名稱。此參數可包含任何 CSS 屬性。如 "color"。

jquery中attr()與css()的差異

#jquery中attr()是取得/修改元素的屬性和值(和Html標籤有關)；css()是取得/修改元素的樣式屬性(和style有關)。

attr()主要是針對元素的屬性進行操作，如img的src屬性和alt屬性，a連結的href屬性等等；

css()修改的是樣式裡面的屬性，即是style裡面的屬性。

前者可以修改的src屬性，可以修改的href屬性，可以修改的title屬性。然而後者卻不行，他它只能修改樣式相關的特徵。

所以，後者是前者的子集，只是對 style這個特定的屬性進行操作。

範例：

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>

##總結

#css()方法是取得/修改樣式屬性(和style有關)的方法；

attr()是取得/修改元素的屬性(和Html標籤有關)的方法；

attr()和css()對style的運算都是針對行內樣式。

style也是元素的屬性，attr()同樣可以對他進行操作，所以在功能上css()可以看成是attr()的子集。

attr()操作回傳的是string，css()操作回傳的是object。

相關影片教學推薦：

jQuery教學（影片）

以上是jquery css()和attr()的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！