HTML DOM Element classList 属性

定义和用法

classList 属性返回元素的 CSS 类名。

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

const list = element.classList;
list.add("myStyle");

亲自试一试

例子 2

从元素中删除 "myStyle" 类：

const list = element.classList;
list.remove("myStyle");

亲自试一试

例子 3

切换 "myStyle" 的开闭：

const list = element.classList;
list.toggle("myStyle");

亲自试一试

提示：页面下方提供更多实例。

语法

element.classList

返回值

类型 描述
对象 DOMTokenList。元素的类名列表。

注释：classList 属性是只读的，但您可以使用下面列出的方法从列表中添加、切换或删除 CSS 类：

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() 为列表中的每个令牌执行回调函数。
item() 返回指定索引处的令牌。
keys() 返回包含列表中键的迭代器。
length 返回列表中的令牌数。
remove() 从列表中删除一个或多个令牌。
replace() 替换列表中的令牌。
supports() 如果令牌是属性支持的令牌之一，则返回 true。
toggle() 在列表中的令牌之间切换。
value 以字符串形式返回令牌列表。
values() 返回带有列表中值的迭代器。

更多实例

例子 4

向元素添加多个类：

element.classList.add("myStyle", "anotherClass", "thirdClass");

亲自试一试

例子 5

从元素中删除多个类：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

亲自试一试

例子 6

元素有多少个类名：

let numb = element.classList.length;

亲自试一试

例子 7

获取元素 "myDIV" 的类名：

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>

const list = document.getElementById("myDIV").classList;

亲自试一试

例子 8

获取元素的第一个类：

let className = element.classList.item(0);

亲自试一试

例子 9

元素是否有 "myStyle" 类？

let x = element.classList.contains("myStyle");

亲自试一试

例子 10

如果元素有 "myStyle" 类，则删除 "anotherClass"：

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

亲自试一试

例子 11

在类之间切换以创建下拉按钮：

document.getElementById("myBtn").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

亲自试一试

例子 12

创建粘性导航栏：

// 获取导航栏
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
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

CSS 教程：CSS 语法

CSS 参考手册：CSS .class 选择器

DOMTokenList 对象

className 属性

getElementsByClassName() 方法

HTML DOM Style 对象