免費AI編程助手
HTML DOM classList 屬性
元素對象定義和用法
classList 屬性返回元素的類名，作為DOMTokenList 對象。
該屬性用于在元素中添加，移除及切換 CSS 類。
classList 屬性是只讀的，但你可以使用add() 和 remove() 方法修改它。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
語法
element.classList
Properties
| 屬性 | Description |
|---|---|
| length | 返回類列表中類的數(shù)量 該屬性是只讀的 |
方法
| 方法 | 描述 |
|---|---|
| add(class1, class2, ...) | 在元素中添加一個或多個類名。 如果指定的類名已存在，則不會添加 /td> |
| contains(class) | 返回布爾值，判斷指定的類名是否存在。 可能值：
|
| item(index) | 返回類名在元素中的索引值。索引值從 0 開始。 如果索引值在區(qū)間范圍外則返回 null |
| remove(class1, class2, ...) | 移除元素中一個或多個類名。 注意： 移除不存在的類名，不會報錯。 |
| toggle(class, true|false) | 在元素中切換類名。 第一個參數(shù)為要在元素中移除的類名，并返回 false。 如果該類名不存在則會在元素中添加類名，并返回 true。 第二個是可選參數(shù)，是個布爾值用于設(shè)置元素是否強制添加或移除類，不管該類名是否存在。例如： 移除一個 class: element.classList.toggle("classToRemove", false); 添加一個 class:element.classList.toggle("classToAdd",true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二個參數(shù)。 |
技術(shù)描述
| 返回值： | 一個 DOMTokenList, 包含元素的類名列表 |
|---|
更多實例
實例
為 <div> 元素添加多個類:
document.getElementById("myDIV").classList.add("mystyle","anotherClass", "thirdClass");
嘗試一下 ?
實例
為 <div> 元素移除多個類:
document.getElementById("myDIV").classList.remove("mystyle","anotherClass", "thirdClass");
嘗試一下 ?
實例
獲取 <div> 元素的類名:
<div id="myDIV" class="mystyleanotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;
var x = document.getElementById("myDIV").classList;
x 輸出結(jié)果為:
mystyleanotherClass thirdClass
嘗試一下 ?
實例
獲取 <div> 元素的第一個類名（索引為0）:
var x = document.getElementById("myDIV").classList.item(0);
x 輸出結(jié)果為:
mystyle
嘗試一下 ?
實例
查看元素是否存在 "mystyle" 類:
var x = document.getElementById("myDIV").classList.contains("mystyle");
x 輸出結(jié)果為:
true
嘗試一下 ?
實例
查看元素是否存在 "mystyle" 類，如果存在則移除另外一個類名:
var x = document.getElementById("myDIV");
if(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}
if(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}
嘗試一下 ?
相關(guān)文章
CSS 教程: CSS 選擇器
CSS 參考手冊: CSS .class 選擇器
HTML DOM 參考手冊: HTML DOM className 屬性
HTML DOM 參考手冊: HTML DOM getElementsByClassName() 方法
HTML DOM 參考手冊: HTML DOM Style 對象
更多建議：