js classlist

In JavaScript, the classList property is a read-only property that is used to manipulate the classes of an HTML element. It provides an interface to add, remove, toggle, and check for the presence of CSS classes on an element. This property is typically used with HTML elements, such as <div>, <p>, or any other element that can have one or more CSS classes applied to it.

Here's an overview of the most commonly used methods and properties of the classList object:

classList.add(className1, className2, ...): Adds one or more CSS classes to the element. You can specify multiple class names separated by commas.

javascript
element.classList.add("new-class");

classList.remove(className1, className2, ...): Removes one or more CSS classes from the element.

javascript
element.classList.remove("old-class");

classList.toggle(className, force): Toggles the presence of a class. If the class is present, it will be removed; if it's absent, it will be added. You can also provide a second argument, force, which is a Boolean value. If force is true, the class will be added regardless of its current state; if false, the class will be removed regardless of its current state.

javascript
element.classList.toggle("active");

classList.contains(className): Checks if the element has a specific class. It returns true if the class is present and false if it's not.

javascript
if (element.classList.contains("highlight")) {
  // Do something when the element has the "highlight" class.
}

classList.item(index): Retrieves a class name by its index in the list of classes applied to the element. The index is zero-based.

javascript
const firstClass = element.classList.item(0); // Retrieves the first class name.

classList.length: Returns the number of classes applied to the element.

javascript
const numberOfClasses = element.classList.length;

javascript
const element = document.getElementById("myElement");

// Adding a class
element.classList.add("new-class");

// Removing a class
element.classList.remove("old-class");

// Toggling a class
element.classList.toggle("active");

// Checking if a class is present
if (element.classList.contains("highlight")) {
  // Do something when the element has the "highlight" class.
}

The classList property is a convenient way to work with CSS classes in JavaScript, making it easier to manipulate an element's styling dynamically.

添加和移除类：

javascript
const element = document.getElementById("myElement");

// 添加一个类
element.classList.add("new-class");

// 移除一个类
element.classList.remove("old-class");

切换类的状态：

javascript
const element = document.getElementById("myElement");

// 切换类的状态，如果有就移除，如果没有就添加
element.classList.toggle("active");

检查类是否存在：

javascript
const element = document.getElementById("myElement");

// 检查类是否存在
if (element.classList.contains("highlight")) {
  // 当元素具有"highlight"类时执行某些操作。
}

迭代类名列表：

javascript
const element = document.getElementById("myElement");

// 获取所有类名并迭代它们
for (let i = 0; i < element.classList.length; i++) {
  console.log(element.classList.item(i));
}

获取类名的数量：

javascript
const element = document.getElementById("myElement");

// 获取类名的数量
const numberOfClasses = element.classList.length;