HTML DOM中的classList属性详解

HTML DOM中的classList属性

classList属性是HTML DOM中的一个重要属性，它可以用来获取元素的类名，也可以用来添加、删除或切换元素的类。

• 获取元素类名

要获取元素的类名，可以使用classList.value属性，它会返回一个包含元素所有类名的字符串：

let elem = document.getElementById('elem');
let classes = elem.classList.value;
console.log(classes); // "foo bar baz"

• 添加类名

要添加一个或多个类名，可以使用classList.add()方法：

let elem = document.getElementById('elem');
elem.classList.add('foo', 'bar');

• 删除类名

要删除一个类名，可以使用classList.remove()方法：

let elem = document.getElementById('elem');
elem.classList.remove('foo');

• 切换类名

要切换一个类名的激活状态，可以使用classList.toggle()方法：

let elem = document.getElementById('elem');
elem.classList.toggle('active');

• 检查类名

要检查一个元素是否包含某个类名，可以使用classList.contains()方法：

let elem = document.getElementById('elem');
let isActive = elem.classList.contains('active');
console.log(isActive); // true or false

classList属性可以方便地操作元素的类名，是HTML DOM中的一个重要属性，在开发中经常会用到。