HTML DOM 元素 classList
示例
向元素添加 "myStyle" 类
const list = element.classList;
list.add("myStyle");
自己尝试 »
从元素中删除 "myStyle" 类
const list = element.classList;
list.remove("myStyle");
自己尝试 »
切换 "myStyle" 的开启和关闭
const list = element.classList;
list.toggle("myStyle");
自己尝试 »
更多示例见下文。
描述
The classList 属性返回元素的 CSS 类名。
The classList 属性返回一个 DOMTokenList.
语法
element.classList
返回值
| 类型 | 描述 |
| 对象 | 一个 DOMTokenList. 元素的类名列表。 |
注意
The classList 属性是只读的，但可以使用下面列出的方法，从列表中添加、切换或删除 CSS 类
classList 属性和方法
| 名称 | 描述 |
|---|---|
| add() | 向列表添加一个或多个标记 |
| contains() | 如果列表包含一个类，则返回 true |
| entries() | 返回一个包含列表中键值对的迭代器 |
| forEach() | 对列表中的每个标记执行回调函数 |
| item() | 返回指定索引处的标记 |
| keys() | 返回一个包含列表中键的迭代器 |
| length | 返回列表中标记的数量 |
| remove() | 从列表中删除一个或多个标记 |
| replace() | 替换列表中的标记 |
| supports() | 如果标记是属性的受支持标记之一，则返回 true |
| toggle() | 在列表中的标记之间切换 |
| value | 将标记列表作为字符串返回 |
| values() | 返回一个包含列表中值的迭代器 |
更多示例
获取 "myDIV" 元素的类名
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>我是 myDIV。</p>
</div>
const list = document.getElementById("myDIV").classList;
自己尝试 »
如果元素包含 "myStyle" 类，则删除 "anotherClass"
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
自己尝试 »
在类之间切换以创建下拉按钮
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
自己尝试 »
创建粘性导航栏
// 获取导航栏
const navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;
// 当滚动到导航栏位置时，向导航栏添加 sticky 类
// 离开滚动位置时将其删除
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
自己尝试 »
浏览器支持
element.classList 在所有浏览器中均受支持
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 是 | 10-11 | 是 | 是 | 是 | 是 |
