JavaScript 经典实例：第三版

处理

HTML

｜

313

12.7.2

方案

使用元素的

classList

属性添加、删除和切换类值。

const element = document.getElementById('example-element');

//

添加一个新类

element.classList.add('new-class');

//

删除一个现有的类

element.classList.remove('existing-class');

//

如果

toggle-me

存在，把它删除；如果不存在，把它加上

element.classList.toggle('toggle-me');

12.7.3

讨论

使用

classList

属性可以轻易修改选中元素的

class

属性。如果不想使用行内

CSS

，就可以使用该属性更新或切换样式。有时，我们想检查元素是否已经有某个

类值，这时，可以使用

contains

方法。

if

(element.classList.contains('new-class')) {

element.classList.remove('new-class');

}

另外，还可以一次性添加、删除或切换多个类值。需要修改的类值可以一个个列出，

也可以使用展开运算符。

//

添加多个类

.classList.add("my-class", "another-class");

//

使用展开运算符删除多个类

const

classes = ["my-class", "another-class"];

div.classList.remove(...classes); ...