JavaScript className 类名属性操作

在JavaScript中，可以通过className属性来操作HTML元素的类名。

1. 添加类名：可以使用element.className += "className"来添加一个类名到元素中。

var element = document.getElementById("myElement");
element.className += " newClass";

1. 移除类名：可以使用element.classList.remove("className")来移除一个类名。

var element = document.getElementById("myElement");
element.classList.remove("oldClass");

1. 切换类名：可以使用element.classList.toggle("className")来切换一个类名，如果元素中已经包含了该类名，则移除该类名，否则添加该类名。

var element = document.getElementById("myElement");
element.classList.toggle("active");

1. 替换类名：可以使用element.classList.replace("oldClass", "newClass")来替换一个类名。

var element = document.getElementById("myElement");
element.classList.replace("oldClass", "newClass");

1. 检查类名：可以使用element.classList.contains("className")来检查元素是否包含指定的类名，返回一个布尔值。

var element = document.getElementById("myElement");
if (element.classList.contains("active")) {// do something
}

1. 获取类名列表：可以使用element.classList来获取元素的所有类名列表，它返回一个DOMTokenList对象。

var element = document.getElementById("myElement");
var classList = element.classList;
console.log(classList); // DOMTokenList ["class1", "class2", "class3"]

需要注意的是，使用className属性进行类名操作会覆盖元素原有的类名，而使用classList属性进行类名操作则不会。因此，推荐使用classList属性来操作类名。

代码示例：

<div id="myElement" class="class1 class2"></div><script>var element = document.getElementById("myElement");// 添加类名element.className += " class3";// 移除类名element.classList.remove("class2");// 切换类名element.classList.toggle("active");// 替换类名element.classList.replace("class1", "newClass");// 检查类名if (element.classList.contains("active")) {// do something}// 获取类名列表var classList = element.classList;console.log(classList); // DOMTokenList ["newClass", "class3", "active"]
</script>