轻松上手,快乐学习!

HTML DOM classList 属性


实例

将 "mystyle" 类添加到 <div> 元素中:

document.getElementById("myDIV").classList.add("mystyle");
亲自试一试 »

页面下方有更多实例。


定义和用法

classList 属性以 DOMTokenList 对象的形式返回元素的类名。

此属性对于在元素上添加、删除和切换CSS类非常有用。

classList 属性是只读的,但是,可以使用 add() 和 remove() 方法对其进行修改。

跨浏览器解决方案: IE9及更早版本不支持classList属性。但是,您可以将 className 属性或正则表达式用于跨浏览器解决方案(请参阅本页底部的"更多实例")。


浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
classList 8.0 10.0 3.6 5.1 11.5

语法

element.classList

属性

属性 描述
length 返回类列表中类的数量

此属性是只读的

方法

方法 描述
add(class1, class2, ...) 在元素中添加一个或多个类名。

如果指定的类名已存在,则不会添加
contains(class) 返回布尔值,判断指定的类名是否存在。

可能值:

  • true - 元素包已经包含了该类名
  • false - 元素中不存在该类名
item(index) 返回元素中索引值对应的类名。索引值从 0 开始。

如果索引值在区间范围外则返回 null
remove(class1, class2, ...) 移除元素中一个或多个类名。

注释: 移除不存在的类名,不会报错。
toggle(class, true|false) 在元素中切换类名。

第一个参数为要在元素中移除的类名,并返回 false。
如果该类名不存在则会在元素中添加类名,并返回 true。

第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。例如:

移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class: element.classList.toggle("classToAdd", true);

注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

技术细节

返回值: 一个 DOMTokenList, 包含元素的类名列表

更多实例

实例

为 <div> 元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
亲自试一试 »

实例

移除 <div> 元素的一个类:

document.getElementById("myDIV").classList.remove("mystyle");
亲自试一试 »

实例

移除 <div> 元素的多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
亲自试一试 »

实例

在 <div> 元素的两个类之间切换:

document.getElementById("myDIV").classList.toggle("newClassName");
亲自试一试 »

实例

获取 <div> 元素的类名:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;
亲自试一试 »

实例

找出一个 <div> 元素有多少类名:

var x = document.getElementById("myDIV").classList.length;
亲自试一试 »

实例

获取 <div> 元素的第一个类名(索引0):

var x = document.getElementById("myDIV").classList.item(0);
亲自试一试 »

实例

了解某个元素是否有 "mystyle" 类:

var x = document.getElementById("myDIV").classList.contains("mystyle");
亲自试一试 »

实例

找出一个元素是否有 "mystyle" 类。如果有,请删除另一个类名:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
  x.classList.remove("anotherClass");
} else {
  alert("Could not find it.");
}
亲自试一试 »

实例

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

// 获取按钮,当用户点击时,执行myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除显示类之间切换,用于隐藏和显示下拉内容 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
亲自试一试 »

回退实例: add

对于IE9及更早版本,使用 classList.add() 方法时的跨浏览器解决方案:

var x, name, arr;
x = document.getElementById("myDIV");
if (x.classList) {
  x.classList.add("mystyle");
} else {
  name = "mystyle";
  arr = x.className.split(" ");
  if (arr.indexOf(name) == -1) {
    x.className += " " + name;
  }
}
亲自试一试 »

回退实例: remove

对于IE9及更早版本,使用 classList.remove() 方法时的跨浏览器解决方案:

var x = document.getElementById("myDIV");

if (x.classList) {
  x.classList.remove("mystyle");
} else {
  x.className = x.className.replace(/\bmystyle\b/g, ""); // 适用于 IE9 及更早版本
}
亲自试一试 »

回退实例: contains

对于IE9及更早版本,使用 classList.contains() 方法时的跨浏览器解决方案:

var x = document.getElementById("myDIV");

if (x.classList) {
  alert(x.classList.contains("mystyle"));
} else {
  alert(/\bmystyle\b/g.test(x.className)); // 适用于 IE9 及更早版本
}
亲自试一试 »

回退实例: toggle

对于IE9,使用 classList.toggle() 方法时的跨浏览器解决方案:

var x = document.getElementById("myDIV");

if (x.classList) {
  x.classList.toggle("mystyle");
} else {
  // For IE9
  var classes = x.className.split(" ");
  var i = classes.indexOf("mystyle");

  if (i >= 0)
    classes.splice(i, 1);
  else
    classes.push("mystyle");
    x.className = classes.join(" ");
}
亲自试一试 »

实例

创建一个粘性导航栏:

// 获取导航栏
var navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
var sticky = navbar.offsetTop;
// 当您到达其滚动位置时,将粘性类添加到导航栏。 离开滚动位置时删除粘性类。
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
亲自试一试 »

相关页面

CSS 教程: CSS 语法

CSS 参考手册: CSS .class Selector

HTML DOM 参考手册: HTML DOM className 属性

HTML DOM 参考手册: HTML DOM getElementsByClassName() 方法

HTML DOM 参考手册: HTML DOM Style 对象


❮ Element 对象