Element.classList-优快云博客

该Element.classList是一个只读属性，返回现场DOMTokenList的元素的类属性的集合。

使用classList是通过空格分隔的字符串访问元素的类列表的便捷替代方法element.className。

句法

const elementClasses = elementNodeReference .classList;

elementClasses是一个DOMTokenList表示 elementNodeReference的类属性。如果class属性未设置或为空，则 elementClasses.length返回0。element.classList本身是只读的，尽管您可以使用add()和remove()方法进行修改。

方法

add( String [, String [, ...]] )

添加指定的类值。如果这些类已经存在于元素的class属性中，则将其忽略。

remove( String [, String [, ...]] )

删除指定的类值。
注意：删除不存在的类不会引发错误。

item( Number )

通过集合中的索引返回类值。

toggle( String [, force] )

仅存在一个参数时：切换类的值；否则，返回0。即，如果该类存在，则将其删除并返回false，如果不存在，则将其添加并返回true。
存在第二个参数时：如果第二个参数的值为true，则添加指定的类值，如果第二个参数的值为，则将其false删除。

contains( String )

检查指定的类值是否存在于元素的class属性中。

replace( oldClass, newClass )

用新的类替换现有的类。

例子

const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

Firefox 26之前的版本未在add / remove / toggle方法中实现几个参数的使用。参见
https://bugzilla.mozilla.org/show_bug.cgi?id=814014