jquery設定元素css樣式的幾種方式

antzone發表於2017-03-18

在jquery中提供了集中對元素進行樣式設定的方式,下面就做一下簡單的介紹。

一.使用css()方法:

利用css()函式可以設定樣式的一個屬性或者同時設定多個屬性。

設定一個樣式屬性:

[JavaScript] 純文字檢視 複製程式碼
$("div").css("color","red")

設定多個樣式屬性:

[JavaScript] 純文字檢視 複製程式碼
$("div").css({color:"red",fontSize:20})

更多相關內容可以參閱jQuery css()一章節。 

二.使用addClass()方法:

此方法可以為指定的物件新增class樣式類,一次性可以新增一個或者多個。

新增一個樣式類:

[JavaScript] 純文字檢視 複製程式碼
$("div").addClass("border");

新增多個樣式類:

[JavaScript] 純文字檢視 複製程式碼
$("div").addClass("border reset");

更多相關內容可以參閱jQuery addClass()一章節。 

三.使用removeClass()方法:

此函式可以刪除指定元素的樣式類,可以使用它移除所有的樣式類或者指定的樣式類。

刪除所有的樣式類:

[JavaScript] 純文字檢視 複製程式碼
$("div").removeClass();

如果方法沒有引數,可以移除匹配元素上的所有樣式類。

刪除指定的樣式類:

[JavaScript] 純文字檢視 複製程式碼
$("div").removeClass("font bg");

可以一次移除一個或者多個樣式類。

更多相關內容可以參閱jQuery removeClass()一章節。 

四.使用toggleClass()方法:

此函式可以切換指定樣式的刪除或者新增。

[JavaScript] 純文字檢視 複製程式碼
$("div").toggleClass("bg")

以上程式碼可以切換樣式類bg的刪除或者新增。

更多相關內容可以參閱jQuery toggleClass()一章節。 

相關文章