動態新增 刪除class樣式

2021-07-28 19:35:30 字數 2353 閱讀 1678

取與設定樣式 獲取class和設定class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class,jquery**如下: 

**如下:

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

[html] 

使用attr()方法來設定p元素的class,jquery**如下: 

[code] 

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 

2 .another 

後在網頁中新增乙個「追加class類」的按鈕,按鈕的事件**如下: 

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

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

1.如果給乙個元素新增了多個class值,那麼就相當於合併了它們的樣式。 2.如果有不同的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"); 

query提供了更簡單的方法。可以以空格的方式刪除多個class名,**如下: 

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

外,還可以利用removeclass()方法的乙個特性來完成同樣的效果。當它不帶引數時,就會將class的值全部刪除,jquery**如下: 

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

換樣式 jquery中有乙個方法toggle(),jquery**如下: 

1 togglebtn.toggle(function(), function()) 

oggle()方法此處的作用是交替執行**③和**④兩個函式,如果元素原來是顯示的,則隱藏它:如果元素原來是隱藏的,則顯示它。此時,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()方法來完成這個功能的.該方法等價於如下**: 

**如下:

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

jquery動態新增,刪除class樣式

獲取class和設定class都可以使用attr 方法來完成。例如使用attr 方法來獲取p元素的class,jquery 如下 var p class p attr class 獲取p元素的class 使用attr 方法來設定p元素的class,jquery 如下 p attr class hig...

動態新增class屬性

首先,我定義三個,單擊後為canvas新增相應的形狀。我是注釋,我是注釋,粘上去灰底黑字好醜好醜,嫌棄臉 以question為例,定義question為乙個菱形,這是 function dispquestionprompt 那麼問題來了,如果我想為動態新增的div再新增class屬性,怎麼辦呢?方法...

給動態元素動態新增樣式

工作上乙個問題,我在ul的容器裡動態新增li標籤,如果給固定樣式的話完全沒問題。但是我想給li動態新增樣式,除了ajax外,我想用jq實現,但是一直不知道怎麼實現。我知道有幾種方法,可以給動態元素新增樣式的,例如我用jquery裡面的load方法載入進了test.html入index.html裡面的...