classList 有类 - Javascript

在Javascript中，DOM元素有一个属性 classList，它包含了处理元素类的方法。本文将会介绍该属性及其方法。

classList 属性

classList 属性是DOM元素的一个只读属性，返回一个 DOMTokenList 对象，它是一个空格分隔的类名列表。

例如，一个拥有类名 btn red large 的按钮元素可以通过以下方式来获取其类列表：

const btn = document.querySelector('.btn');
const classList = btn.classList; // DOMTokenList ["btn", "red", "large"]

add 方法

add 方法会在元素的类列表中添加一个新的类。如果该类名已经存在于列表中，则该方法不会添加，并且不会产生任何错误。

例如，我们可以通过以下方式为按钮元素添加一个新的类：

btn.classList.add('disabled');

remove 方法

remove 方法会从元素的类列表中删除一个类。如果该类名不存在于列表中，则该方法不会删除，并且不会产生任何错误。

例如，我们可以通过以下方式为按钮元素删除一个类：

btn.classList.remove('large');

toggle 方法

toggle 方法会在元素的类列表中添加或删除一个类。如果该类名不存在于列表中，则该方法会添加，并返回 true。如果该类名已经存在于列表中，则该方法会删除，并返回 false。

例如，我们可以通过以下方式为按钮元素切换一个类：

btn.classList.toggle('active');

contains 方法

contains 方法会检查一个类是否存在于元素的类列表中。如果存在，则返回 true，否则返回 false。

例如，我们可以通过以下方式检查按钮元素是否同时拥有 btn 和 red 两个类名：

const hasBtnClass = btn.classList.contains('btn'); // true
const hasRedClass = btn.classList.contains('red'); // true
const hasGreenClass = btn.classList.contains('green'); // false

总结

classList 属性提供了方便的方法来添加、删除和切换元素的类名，以及检查元素是否具有某些类名。这使得处理DOM元素的样式变得更加简单，并且不需要手动管理类名字符串。