classList.toggle - Javascript

classList.toggle是Javascript中DOM元素的一个属性，用于在元素的class列表中开关(添加或删除)类名。

使用语法

element.classList.toggle(class);

• element: 需要修改class列表的元素。
• class: 需要添加或删除的类名。

返回值

• true: 如果添加了class。
• false: 如果删除了class。

功能示例

// 获取元素
const div = document.querySelector('div');

// 添加类名
div.classList.toggle('test');
console.log(div.classList); // ['test']

// 删除类名
div.classList.toggle('test');
console.log(div.classList); // []

// 再添加类名
div.classList.toggle('test');
console.log(div.classList); // ['test']

多个类名同时添加/删除示例

// 获取元素
const div = document.querySelector('div');

/**
 * 添加类名
 * 如果test1和test2都未出现在class列表中，添加它们两个。
 * 如果test1或test2其中之一已经存在于class列表中，那么这个类名将被移除。
 */
div.classList.toggle('test1');
div.classList.toggle('test2');

// 删除类名
div.classList.toggle('test1');
div.classList.toggle('test2');

// 再次添加类名
div.classList.toggle('test1');
div.classList.toggle('test2');

小结

classList.toggle是一个很方便的DOM属性，可以轻松地添加和删除元素的类名。同时，它可以同时添加多个类名，而不只是单个类名。