JavaScript 對(duì)象
- JavaScript Array 對(duì)象
- JavaScript Boolean 對(duì)象
- JavaScript CSS 樣式聲明對(duì)象
- JavaScript Math 對(duì)象
- JavaScript Number 對(duì)象
- JavaScript String 對(duì)象
- JavaScript 正則表達(dá)式(RegExp) 對(duì)象
- JavaScript Console 對(duì)象
JavaScript 參考手冊(cè)
JS DOM參考手冊(cè)
- JS和HTML DOM參考手冊(cè)
- HTML DOM Attribute 對(duì)象
- HTML DOM Document 對(duì)象
- HTML DOM Element 對(duì)象
- JavaScript History 對(duì)象
- JS DOM HTMLCollection 對(duì)象
- JavaScript Location 對(duì)象
- JavaScript Navigator 對(duì)象
- JavaScript Screen 對(duì)象
- HTML DOM Style 對(duì)象
- JavaScript Window 對(duì)象
- JS Storage 對(duì)象
- Event Objects(事件對(duì)象)
- HTML DOM Events
HTML DOM classList 屬性
classList只讀屬性返回元素的類(lèi)屬性的實(shí)時(shí)DOMTokenList集合。
classList屬性對(duì)于在元素上添加，刪除和切換CSS類(lèi)很有用。
該屬性是只讀的，盡管您可以使用add()和remove()方法對(duì)其進(jìn)行修改。
使用classList是一種方便的代替方法，它可以通過(guò)className以空格分隔的字符串訪問(wèn)元素的類(lèi)列表。
語(yǔ)法：
element.classList
var elem = document.getElementById("x");
elem.classList.add("para");測(cè)試看看?/?瀏覽器兼容性
表中的數(shù)字指定了完全支持classList屬性的第一個(gè)瀏覽器版本：
| 屬性 |  |  |  |  |  |
| classList | 8 | 3.6 | 是 | 5.1 | 10 |
性質(zhì)
| 屬性 | 描述 |
|---|---|
| length | 返回列表中的類(lèi)數(shù) |
方法
| 方法 | 描述 |
|---|---|
| add(class1, class2, ...) | 將一個(gè)或多個(gè)類(lèi)名稱添加到元素。 如果元素的class屬性中已經(jīng)存在指定的類(lèi)，則不會(huì)添加該類(lèi)。 |
| contains(class) | 檢查指定的類(lèi)值是否存在于元素的class屬性中。 可能的值：
|
| item(index) | 通過(guò)集合中的索引返回類(lèi)值。索引從0開(kāi)始。 如果索引超出范圍，則返回null。 |
| remove(class1, class2, ...) | 從元素中刪除一個(gè)或多個(gè)類(lèi)名稱。 注意：刪除不存在的類(lèi)不會(huì)引發(fā)錯(cuò)誤。 |
| replace(oldClass, newClass) | 用新的類(lèi)替換現(xiàn)有的類(lèi)。 |
| toggle(class, true|false) | 在元素的類(lèi)名稱之間切換。 僅存在一個(gè)參數(shù)時(shí)：切換類(lèi)的值；否則，返回0。即，如果該類(lèi)存在，則將其刪除并返回false，如果不存在，則將其添加并返回true。 當(dāng)存在可選的第二個(gè)參數(shù)時(shí)：如果第二個(gè)參數(shù)的值為true，則添加指定的類(lèi)值；如果第二個(gè)參數(shù)的值為false，則將其刪除。 示例： 刪除一個(gè)類(lèi)：element .classList.toggle（“ classToRemove”，false）; 添加一個(gè)類(lèi)：element .classList.toggle（“ classToAdd”，true）; |
技術(shù)細(xì)節(jié)
| 返回值： | DOMTokenList，包含元素的類(lèi)名稱的列表 |
|---|---|
| DOM版本： | DOM級(jí)別1 |
更多實(shí)例
將多個(gè)類(lèi)添加到<p>元素：
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");測(cè)試看看?/?從<p>元素中刪除一個(gè)類(lèi)：
var elem = document.getElementById("x");
elem.classList.remove("para");測(cè)試看看?/?從<p>元素中刪除多個(gè)類(lèi)：
var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");測(cè)試看看?/?在兩個(gè)類(lèi)之間切換<p>元素：
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");測(cè)試看看?/?返回<p>元素具有的類(lèi)名稱：
var len = document.getElementById("x").classList.length;測(cè)試看看?/?返回<p>元素的類(lèi)名稱：
var name = document.getElementById("x").classList;測(cè)試看看?/?返回<p>元素的第一個(gè)類(lèi)名稱（索引0）：
var name = document.getElementById("x").classList[0];測(cè)試看看?/?使用item()方法返回<p>元素的第一個(gè)類(lèi)名稱（索引0）：
var name = document.getElementById("x").classList.item(0);測(cè)試看看?/?找出元素是否具有“shadow”類(lèi)：
var list = document.getElementById("x").classList;
if (list.contains("shadow")) {
alert("Yes!!! The P element contains 'shadow' class");
} else {
alert("No 'shadow' class found");
}測(cè)試看看?/?切換一個(gè)類(lèi)（“open”）以創(chuàng)建側(cè)面導(dǎo)航按鈕：
相關(guān)參考
CSS教程：CSS選擇器
CSS參考：CSS#id選擇器
CSS Reference: CSS .class 選擇器
HTML DOM參考：HTML DOM className屬性
HTML DOM參考：HTML DOM getElementsByClassName()方法
HTML DOM參考：HTML DOM getElementById()方法
HTML DOM參考：HTML DOM querySelector()方法