HTML DOMTokenList
DOMTokenList
DOMTokenList
是一组由空格分隔的标记。
DOMTokenList
可以通过索引(从 0 开始)访问。
length 属性 返回 DOMTokenList 中标记的数量。
注意
HTML 元素的 classList 属性 表示一个 DOMTokenList。
DOMTokenList 属性和方法
名称 | 描述 |
---|---|
add() | 向列表中添加一个或多个标记 |
contains() | 如果列表包含某个类,则返回 true |
entries() | 返回一个包含列表中键/值对的迭代器 |
forEach() | 为列表中的每个标记执行回调函数 |
item() | 返回指定索引处的标记 |
keys() | 返回一个包含列表中键的迭代器 |
length | 返回列表中标记的数量 |
remove() | 从列表中删除一个或多个标记 |
replace() | 替换列表中的标记 |
supports() | 如果标记是属性支持的标记之一,则返回 true |
toggle() | 在列表中的标记之间切换 |
value | 将标记列表作为字符串返回 |
values() | 返回一个包含列表中值的迭代器 |
示例
为元素添加 "myStyle" 类
element.classList.add("myStyle");
自己动手试一试 »
从元素中移除 "myStyle" 类
element.classList.remove("myStyle");
自己动手试一试 »
切换 "myStyle" 的开/关状态
element.classList.toggle("myStyle");
自己动手试一试 »
更多示例见下文。
不是数组
DOMTokenList 不是数组!
DOMTokenList 看起来像一个数组,但它不是。
您可以循环遍历 DOMTokenList 并使用索引引用其标记。
但您不能在 DOMTokenList 上使用 push()、pop() 或 join() 等数组方法。
获取 "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");
}
}
自己动手试一试 »