everest33

【注】attr(),prop(),val()的用法結構和css()一致，可參考

css()函數用于設置或返回當前jQuery對象所匹配的元素的css樣式屬性值。

該函數屬于jQuery對象(實例)。如果需要刪除指定的css屬性，請使用該函數將其值設為空字符串("")。

語法

css()函數有以下兩種用法：

用法一：

jQueryObject.css( propertyName [, value ] )

設置或返回指定css屬性propertyName的值。

• 如果指定了value參數，則表示設置css屬性propertyName的值為value；
• 如果沒有指定value參數，則表示返回css屬性propertyName的值。

用法二：

jQueryObject.css( object )

以對象形式同時設置任意多個屬性的值。對象object的每個屬性對應propertyName，屬性的值對應value。

注意：
1、如果省略了value參數，則表示獲取屬性值；如果指定了該參數，則表示設置屬性值。
2、css()函數的所有"設置"操作針對的是當前jQuery對象所匹配的每一個元素；所有"讀取"操作只針對第一個匹配的元素。

參數

請根據前面語法部分所定義的參數名稱查找對應的參數。

jQuery 1.4 新增支持：參數value可以是函數，css()將根據匹配的所有元素遍歷執行該函數，函數中的this指針將指向對應的DOM元素。css()還會為函數傳入兩個參數：第一個參數就是該元素在匹配元素中的索引，第二個參數就是該元素css屬性propertyName當前的值。函數的返回值就是為該元素的css屬性propertyName設置的值。

jQuery 1.9 新增支持：如果是"獲取"操作(僅限"獲取"操作)，參數propertyName還可以是多個css屬性名稱組成的數組，css()將以對象形式返回多個css屬性(對象的屬性名稱對應css屬性名稱，屬性值對應css屬性值)。

返回值

css()函數的返回值是任意類型，返回值的類型取決于當前css()函數執行的是"設置"操作還是"讀取"操作。

如果css()函數執行的是"設置"操作，則返回當前jQuery對象本身；如果是"讀取"操作，則返回讀取到的屬性值,帶單位。

如果當前jQuery對象匹配多個元素，返回屬性值時，css()函數只以其中第一個匹配的元素為準。如果該元素沒有指定的屬性，則返回undefined。

第二個參數是函數的用法：

　　　　這個函數會針對匹配的元素集中的每個元素都調用一次，調用后的返回值將作為屬性的值

　　　　　　　　$(document).ready(function() {
　　　　　　　　　　　　$('div.chapter a').attr({
　　　　　　　　　　　　　　rel: 'external',
　　　　　　　　　　　　　   title: 'Learn more at Wikipedia',
　　　　　　　　　　　　　　id: function(index, oldValue) {
　　　　　　　　　　　　　　　　return 'wikilink-' + index;
　　　　　　　　 　　　　　　　}
　　　　　　　　　　　　});
　　　　　　　　　　});
每次觸發值回調，都會給它傳入兩個參數。第一個是一個整數，表示迭代次數，我們在此利用這個值為第一個鏈接生成的 id 是 wikilink-0 ，為第二個鏈接生成的 id 是 wikilink-1 ，以此類推。代碼清單5-3并沒有用到第二個參數，這個參數中保存的是修改之前屬性的值。

注意事項

1、如果參數value為空字符串("")，則表示刪除該css屬性。

2、對于多個單詞構成的css屬性，你可以使用其css格式("-")或者DOM格式(駝峰式)，jQuery都能理解。例如background-color，你可以將propertyName設為background-color或backgroundColor。建議優先以駝峰式來獲取(jQuery底層也是通過DOM來獲取的，DOM元素的屬性均以駝峰式命名)。

3、有些時候獲取到的css屬性值與你在樣式表中設置的值并不完全相同。例如：某些表示尺寸的屬性值，你可能在樣式表中設置的單位是em、px、ex或者%，但jQuery獲取的是經過瀏覽器計算后css屬性值，其單位多數情況下為像素。此外，不同瀏覽器對于顏色(color)屬性值的文本表示也不一致，以white為例，瀏覽器可能返回white、#FFF、#ffffff、rgb(255,255,255)等，當然它們在邏輯上都表示白色。

4、對于一些速寫的css屬性，例如margin、padding、background、border。盡管某些瀏覽器提供了此功能，但它的結果是無法保證的，有些瀏覽器也并不支持。以margin為例，你可能需要通過css("marginTop")、css("marginRight")等方式來分別獲取。從jQuery 1.9開始，你可以傳入一個數組來獲取多個css屬性(以對象形式返回)。

示例&說明

以下面這段HTML代碼為例：

<p id="n1" style="font-size: 16px; font-weight:bold; color: #333; margin: 10px 5px;">CodePlayer</p>
<p id="n2" style="font-size: 14px; font-weight:bold; color: #aacd12; padding: 5px ; border: 1px solid #000;">專注于編程開發技術分享</p>

我們編寫如下jQuery代碼：

var $n1 = $("#n1");
var $n2 = $("#n2");

document.writeln( $n1.css("fontSize" /* 或者"font-size" */ ) );
document.writeln( $n1.css("margin") ); // Chrome：10px 5px | FireFox和IE下無輸出
document.writeln( $n1.css("marginTop") ); // 10px (所有瀏覽器均支持)
document.writeln( $n1.css("marginLeft") ); // 5px (所有瀏覽器均支持)

// 取消n1的粗體
$n1.css("fontWeight", "normal");

// 更改n2的背景色和字體
$n2.css( { backgroundColor: "#efefef", "font-family": '"Microsoft Yahei"' } );

var styleObj = $n2.css( ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"] );
document.writeln( styleObj.paddingTop ); // 5px
document.writeln( styleObj.paddingRight ); // 5px

// 刪除n2的border屬性
$n2.css("border", "");

// 更改所有p元素的font-weight屬性
// 如果是粗體就還原，不是粗體就加粗
$("p").css("fontWeight", function(index, value){
    return value == "bold" ? "normal" : "bold";     
});