有了JQuery，元素的樣式操作會變得相當簡易。下面我們來看看如何使用JQuery來實現元素樣式的獲取、設置、追加、刪除以及其它一些操作。

獲取與設置樣式

獲取class和設置class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class，JQuery代碼如下：

1	var?p_class = $("p").attr("class");?//獲取p元素的class

使用attr()方法來設置p元素的class，JQuery代碼如下：

1	$("p").attr("'class",?"high");??//設置p元素的class為 "high"

在大多數情況下，它是將原來的class替換為新的class，而不是在原來的基礎上追加新的class。

追加樣式

什么是追加class呢？假如p元素原本的class為myClass，那么追加一個名叫high的class后，class屬性變為“myClass high”，即myClass和high兩種樣式的疊加。JQuery提供了專門的addClass()方法來追加樣式。為了使例子更容易理解，首先在style標簽里添加另一組樣式：

1	.high{ color:red; }

2	.another{ font-style:italic; color:blue; }

然后在網頁中添加一個“追加class類”的按鈕，按鈕的事件代碼如下：

1	$("#btn_3").click(function(){

2	????$("#nm_p").addClass("another");?// 追加樣式

3

});

最后當單擊“追加class類”按鈕時，p元素樣式就會變為斜體，而先前的紅色字體也會變為藍色。此時p元素同時擁有兩個class值，即"high"和"another"。在CSS中有以下兩條規定。

如果給一個元素添加了多個class值，那么就相當于合并了它們的樣式。

如果有不同的class設定了同一樣式屬性，則后者覆蓋前者。

在上例中，相當于給p元素添加了如下樣式：

1	color : red;????????/* 字體顏色設置紅色*/?

2	font-style:italic;??

3	color:blue;

在以上的樣式中，存在兩個“color”屬性，而后面的“color”屬性會覆蓋前面的“color”屬性，因此最終的“color”屬性的值為“blue”，而不是“red”。

移除樣式

如果用戶單擊某個按鈕時，要刪除class的某個值，那么可以使用與addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或者指定的class。例如可以使用如下的JQuery代碼來刪除p元素中值為“high”的class:

1	$("p").removeClass("high");??//移除p元素中值為"high"的class

如果要把p元素的兩個class都刪除，就要使用兩次removeClass()方法，代碼如下：

1	$("p").removeClass("high").removeClass("another");

JQuery提供了更簡單的方法。可以以空格的方式刪除多個class名，代碼如下：

1	$("p").removeClass("high another");

另外，還可以利用removeClass()方法的一個特性來完成同樣的效果。當它不帶參數時，就會將class的值全部刪除，JQuery代碼如下：

1	$("p").removeClass();??//移除p元素的所有class

切換樣式

JQuery中有一個方法toggle()，JQuery代碼如下：

1	toggleBtn.toggle(function(){??????

2	??????//元素顯示??? 代碼③??????

3	},?function(){??????

4	??????//元素隱藏??? 代碼④??????

5

})

toggle()方法此處的作用是交替執行代碼③和代碼④兩個函數，如果元素原來是顯示的，則隱藏它：如果元素原來是隱藏的，則顯示它。此時，toggle()方法主要是控制行為上的重復切換。

另外JQuery還提供了一個toggleClass()方法控制樣式上的重復切換。如果類名存在則刪除它，如果類名不存在則添加它。例如對p元素進行toggleClass()方法操作。

1	$("p").toggleClass("another");??//重復切換類名“another”

當不斷單擊“切換樣式”按鈕時，p元素的class的值就會在“myClass”和“myClass another”之間重復切換。

判斷是否含有某個樣式

hasClass()可以用來判斷元素中是甭含有某個class，如果有，則返回true，否則返回false。例如可以使用下面的代碼來判斷p元素中是否含有“another”的class：

1	$("p").hasClass("another");

這個方法是為了增強代碼可讀性面產生的。在JQuery內部實際上是調用了is()方法來完成這個功能的．該方法等價于如下代碼：

1	$("p").is(".another");??//is("."+class);

轉載于:https://www.cnblogs.com/zqn518/archive/2012/02/10/2345664.html

總結

以上是生活随笔為你收集整理的JQuery 样式设置、追加、移除与切换的全部內容，希望文章能夠幫你解決所遇到的問題。

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