HTML5中classList屬性

[導讀] 前面為大家介紹了一些關於HTML5新加入的選擇器，分別是querySelector()，querySelectorAll()和getElementsByClassName()。這三個都有自己獨特的功能，大家有需要的話可以看HTML5實戰與剖析中的相關內容。今天為大

前面為大家介紹了一些關於HTML5新加入的選擇器，分別是querySelector()，querySelectorAll()和getElementsByClassName()。這三個都有自己獨特的功能，大家有需要的話可以看HTML5實戰與剖析中的相關內容。今天為大家介紹classList屬性。

　　classList屬性究竟是做什麼的，我們先撇下classList不管。我們考慮這麼一個問題，那就是我們如何將擁有多個類別名稱的元素中的其中一個類別名稱刪除呢?夢龍較勁腦汁兒終於想到一個實現的方法。將擁有類別名稱li、meng和long，三個類別名稱中的類別名稱meng刪除。程式碼如下

　　HTML程式碼 

1. #

   <p class="li meng long">梦龙小站</p>

　　JavaScript程式碼

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
//获取类名字符串并拆分成数组  
var allClassName = p.className.split(" ");  
  
//找到要删除的类名  
var i, len,   
    pos = -1;  
  
for(i=0, len = allClassName.length; i < len; i++){  
    if(allClassName[i] == "meng"){  
        pos = i;  
        break;  
    }  
}  
  
//删除类名  
allClassName.splice(pos, 1);  
  
alert(allClassName) //li,long  
  
//将其余的类名拼成字符串并重新添加到元素的类名中  
p.className = allClassName.join(" ");

 

　　JavaScript程式碼

<p class="li meng long">梦龙小站</p>

 

預覽效果

 

 

 

　　為了從的元素類別名稱中刪除」meng”，上面這些程式碼都是必須的。透過類似的演算法替換類別名稱並確認元素中是否包含該類別名稱。若是新增類別名稱可以透過拼接字串完成，但是必須透過偵測確定不會多次新增相同的類別名，很多JavaScript函式庫都是實作了這個方法，簡化操作。而刪除類別名稱則是先要取得已經有的類別名，找到要刪除類別名稱的位置，然後進行刪除。

　　透過上面的方法可以看出，要實作一個簡單的刪除功能要寫好幾行程式碼，若不想寫好幾行程式碼就得引入一個函式庫中的方法才可以。有了HTML5就不用那麼麻煩了，我們可以用HTML5中的classList屬性來完成這些步驟。這個classList屬性是新集合類型DOMTokenList的實例。與其他DOM集合類似。 DOMTokenList有一個表示自己包含多少元素的length屬性，而要取得每個元素可以使用item()方法也可以使用方括號語法。此外，以下是給這個新類型定義的方法。

 

　　1、remove(value)

 

　　remove(value)方法表示從清單中刪除給定的字串。小範例如下：

 　　HTML程式碼

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList)  //li meng long  
  
p.classList.remove("meng")   
  
alert("p.className: " + p.className)  //p.className: li long

　　JavaScript程式碼

 

<p class="li meng long">梦龙小站</p>

　　預覽效果#of

 

　　2、contains(value)

 

　　contains(value)方法表示清單中是否存在給定的值，如果存在就返回”true”，否則返回”false”小例子如下：

 
1. 　　HTML代碼

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList.contains("meng")) //true  
  
alert(p.classList.contains("menglong")) //false

 

　　JavaScript程式碼

 

<p class="li meng long">梦龙小站</p>

　　3、add(value)

　　add(value)方法表示清單中的字串加入清單。如果已經存在就不添加了。小例子如下：

 

　　HTML代碼

//添加类名 menglong  
  
//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
p.classList.add("menglong");  
  
alert("p.className: " + p.className)  //p.className: li meng long menglong

　　JavaScript代碼

<p class="li meng long">梦龙小站</p>  
梦龙小站

 

　　預覽效果

 

 

　　4、toggle(value)

 

　　toggle(value)方法，如果清單中已經存在給定的值，刪除它;如果清單中沒有給定的值，請添加它。小例子如下：

 

　　HTML代碼

//切换类名 meng  
  
//获取要删除类名li的p  
var p = document.getElementsByTagName("p");  
var i, len;  
  
for(i=0, len = p.length; i< len; i++){  
    p[i].classList.toggle("meng");  
}  
  
  
alert("p[0].className: " + p[0].className)  //p[0].className: li long  
alert("p[1].className: " + p[1].className)  //p[1].className: li meng long

　　JavaScript代碼

rrreee

 

　　預覽效果

 

 

 

###　　有關classList的小例子們已經為大家呈現了，透過小例子就能把這些小方法展現和解釋清楚了。有了classList，除非你需要全部刪除所有類別名，或是完全重寫元素的class屬性，否則用不到className屬性了，而且還附加很多實用的方法。支援classList屬性的瀏覽器有Firefox 3.6+ 和Chrome。 ######　　HTML5實戰與剖析之classList屬性就為大家介紹到這裡了，點滴的累積就是明天的成功，一天學點HTML5，有一天一定能成功學會的。感謝大家支持夢龍小站，更多有關HTML5的更新敬請關注夢龍小站關於HTML5實戰與剖析的更新。 ###

以上是HTML5中classList屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！