jquery之 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對象所匹配的每一個元素；所有"讀取"操作只針對第一個匹配的元素。

參數

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

參數	描述
propertyName	String/Array類型指定的css屬性名稱(用於設定或返回)，或者css屬性名稱數組(僅用於返回)。
value	可選/String/Number/Function類型指定的屬性值，或返回屬性值的函數。
object	Object類型指定的對象，用於封裝多個索引值對，同時設定多項屬性。

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。

注意事項

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";     
});

 

jquery之 css()方法