jquery css()和attr()的區(qū)別是什么

區(qū)別：attr()主要是針對元素的屬性進行操作（和Html標簽有關），如img的src屬性和alt屬性，a鏈接的href屬性等等；而css()修改的是樣式里面的屬性（和style有關），即是style里面的屬性。

本教程操作環(huán)境：windows7系統、jquery1.10.0版本、Dell G3電腦。

jquery中有attr()和css()兩種方法：

attr是attribute的縮寫，意思是標簽屬性。css是，樣式，意思是元素的style樣式的。

jquery attr()方法

attr() 方法設置或返回被選元素的屬性和值。

當該方法用于返回屬性值，則返回第一個匹配元素的值。

當該方法用于設置屬性值，則為匹配元素設置一個或多個屬性/值對。

語法

返回屬性的值：

$(selector).attr(attribute)

設置屬性和值：

$(selector).attr(attribute,value)

attribute：規(guī)定屬性的名稱。

value：規(guī)定屬性的值。

jquery css()方法

css() 方法返回或設置匹配的元素的一個或多個樣式屬性。

返回第一個匹配元素的 CSS 屬性值。

注釋：當用于返回一個值時，不支持簡寫的 CSS 屬性（比如 "background" 和 "border"）。

$(selector).css(name)

name：必需。規(guī)定 CSS 屬性的名稱。該參數可包含任何 CSS 屬性。比如 "color"。

jquery中attr()與css()的區(qū)別

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

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

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

前者可以修改<img>的src屬性，可以修改<a>的href屬性， 可以修改<input>的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教程（視頻）