實例

設置 <p> 元素的顏色：

$(".btn1").click(function(){$("p").css("color","red");});

親自試一試

定義和用法

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

語法 1

返回第一個匹配元素的樣式屬性。

$(selector).css(name)

name?參數可以包含任何字符串類型的 CSS 屬性名。比如 "color"：

取得第一個段落的 color 樣式屬性的值：

$("p").css("color");

親自試一試

語法 2

設置所有匹配的元素中樣式屬性的值。

$(selector).css(name,value)

將所有段落的顏色設為紅色：

$("p").css("color","red");

親自試一試

參數 描述

name	必需。規定 CSS 屬性的名稱。 該參數可以包含任何字符串類型的 CSS 屬性名。比如 "color"。 如果只設置該參數，則該方法會返回第一個匹配元素的 CSS 屬性的當前值。
value	可選。規定 CSS 屬性的值。 該參數可包含任何字符串類型的 CSS 屬性值。比如 "red"。 該參數只能與 name 參數一起使用。如果設置了 name 和 value 參數，則該方法將為所有匹配的元素設置指定的 CSS 屬性和值。 如果該參數的值是數字，則轉換為像素值（除了 font-weight, line-height, opacity, z-index and zoom）。 如果設置了空字符串值，則從元素中刪除樣式屬性。

語法 3

設置所有匹配的元素中樣式屬性的值。

$(selector).css(name,function(index,value))

此函數返回要設置的屬性值。接受兩個參數，index 為元素在對象集合中的索引位置，value 是原先的屬性值。

逐漸增加 div 的寬度：

$("div").click(function() {$(this).css("width", function(index, value) {return parseFloat(value) * 1.2;});});

親自試一試

語法 4

$(selector).css({properties})

把一個“名/值對”對象設置為所有匹配元素的樣式屬性。

這是一種在所有匹配的元素上設置大量樣式屬性的最佳方式。

$("p").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});

親自試一試

jQuery提供css()的方法來實現嵌入式改變元素樣式，css()方法在使用上具有多樣性。其中一種接受兩個輸入參數：樣式屬性和樣式值，它們之間用逗號分開。比如我們要改變鏈接顏色，我們可以使用下面的代碼：

$("#61dh a").css('color','#123456'); //這里選擇器‘$("#61dh a")’表示ID為‘#61dh’的元素下的所有鏈接。 //.css(‘color’,'#123456');表示把顏色設為'#123456'

如果我們需要改變多個樣式屬性，我們可以先定義屬性變量，然后直接賦值給css()方法。示例如下：

var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //這里我們先定義了一個CSS樣式屬性變量‘divcss’，這類似于建立一個外部CSS文件。 //然后通過jQuery提供的css()方法，把屬性賦給ID為'#result'的DIV。

另外jQuery提供的css()方法還可以用來查看某個元素的css屬性值。例如，我們想查看鏈接的顏色，可以使用下面的代碼：

$("#61dh a").css("color") //和第一個例子相似，但是這里我們只傳遞一個參數(樣式屬性)

最后要介紹的是如何設置鼠標劃過后的鏈接樣式(比如: 顏色)。我們無法使用選擇器直接選擇鼠標劃過狀態下的鏈接，也就是說$("a:hover")是不成立的。因此我們需要用到jQuery提供的事件類方法 -?hover()。值得注意的是，hover()方法需要定義兩個函數，一個是鼠標劃過時；另一個是鼠標劃過后。具體方法如下：

$("#61dh a").css('color','#123456'); $("#61dh a").hover(function(){ $(this).css('color','#999'); }, function(){ $(this).css('color','#123456'); }); //hover()方法的兩個函數使用用逗號分隔

你或許注意到這種方法一點都不簡潔(違背了jQuery的宗旨)，其實jQuery提供的hover()方法不是用來改變CSS樣式的。在實際運用中，建議使用添加/移出CSS的方法來改變鼠標劃過的鏈接樣式。

$(this).click(function(){
??if($(this).hasClass(“zxx_fri_on”)){
????$(this).removeClass(“zxx_fri_on”);
??}else{
????$(this).addClass(“zxx_fri_on”);
??}
??return false;
});

添加或去除元素集合的class name

1. 使用addClass()方法

?addClass(names) 添加names指定的一個或多個class name給wrapped set。如果有多個name，使用空格分開，總之names是個字符串。

返回原來的wrapped set以進行JQuery鏈式操作。?

注意：如果在添加的樣式聲明中有重復聲明，誰的優先級更高呢？ 請參閱這里看CSS的權重分配。

?

2. 使用removeClass()方法

removeClass(names) 去除names指定的一個或多個class name。如果有多個names，使用空格分開。

返回原來的wrapped set以進行JQuery鏈式操作。

3. 使用toggleClass()方法

toggleClass(name) 這次只能有一個class name作為參數。如果該class已經存在，則去除之；如果沒有則添加之。

返回原來的wrapped set以進行JQuery鏈式操作。

獲取或設置CSS樣式

1. 使用css(name, value)方法

這個方法用來設置css樣式給wrapped set中的每一個元素。

name就是css樣式的屬性名稱；

value可以是(string|number|function) ，類似于上節提到的attr(name, value)方法，value如果是function，則傳給function的參數時元素在wrappsed set中的序號，function內部使用this指向正在被操作的Javascript DOM元素（夠強）。function的返回值就是要設置的 css屬性的值了。

比如：

$('div').css('font-size', function(n){
?? ??? ?return (n+1)+'em';

?? ?});

將頁面中div按照出現的順序依次加大字體大小。?

2. 使用css(properties)方法

參數properties是一個object，其中定義了class屬性名稱和值對。這樣一次就可以進行多個css屬性的設置了。

返回的依然是wrapped set以方便JQuery鏈式操作。

如：

$('div:eq(0)').css({

? ? 'font-size' : '2em',

??? 'color' : '#cc00ff'

});?

比較郁悶的是,這個Object的屬性名必須用引號引起來作為一個字符串，否則是不能被瀏覽器識別的，attr()類似的方法就無需這樣。

同樣Object中也可以包含function,如：

??? $('div').css({
?? ??? ?'font-size': function(n)
?? ??? ??? ?{
?? ??? ??? ??? ?return (n+2) + 'em';
?? ??? ??? ?}

?? ??? ?});

3. 使用css(name)方法

這個方法返回由name指定的css 屬性的值，返回的值是一個字符串，因此有些情況需要轉換一下。這個方法只能返回wrapped set中第一個元素的指定css屬性值。

如：$('#firstDiv').css('font-size')可能返回一個字符串 '16PX'。

順便說一下，如果想得到指定元素的class名稱（如果指定的話），使用Javascript標準方法，如：

$('#firstDiv')[0].className

4.使用width()和height()方法

1）不帶參數的width()和height()方法返回wrapped set中第一個元素的寬和高，這里直接返回一個number（單位為px），無需從字符串轉換了。

2) 帶參數的witdh(value)和height(value) 給wrapped set中每個元素指定由value表示的寬高。返回wrapped set。

value的值可以是number或者是字符串。如果是number則單位是px。

如：$('div').width(600);??? //600px

$('div') .width('400mm'); //400mm

hasClass(name)方法

判斷wrapped set中是否有任何一個元素包含了name指定的class name, name也可以是一個用空格分開的多個class names組成的字符串。返回true | false;

注意：class name和class property name的區別：

-- class name指定義style的css名稱，一個style定義會包含很多class property.比如定義一個叫 ownStyle的樣式。

-- class property name指css規范中的css屬性名。比如 font-size,color等等。

如果想得到一個元素的所有class names，使用attr('className')方法或者Javascript DOM屬性className。注意在分割返回的字符串時，首先判斷字符串是否為空。如：

$.fn.getClassNames?=?function()?{
????if?(name?=?this.attr("className"))?{
????????return?name.split("?");
????}
????else?{
????????return?[];
????}
}; ?這段代碼為JQuery添加了擴展函數getClassNames()用來得到元素的class name數組。

總結

以上是生活随笔為你收集整理的jQuery CSS 操作 - css() 方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。