使用JavaScript动态添加和删除CSS类，轻松操控网页元素！本文将讲解如何利用JavaScript的className和classList属性高效地管理CSS类，实现网页元素的动态修改，例如显示/隐藏菜单、突出显示表单错误或元素动画等效果。
核心要点：
className和classList属性是操作CSS类的利器；className兼容性更广，classList则更现代化和便捷。className或classList属性向元素添加或删除类。这些函数可接收字符串选择器或元素本身作为参数，循环遍历元素并添加或删除指定的类。classList属性（IE10及以上浏览器支持）提供一系列方法来操作类，包括add、remove和toggle，简化了添加或删除类的过程。兼容性方案：使用className属性
className属性允许访问HTML元素的class属性。通过字符串操作，我们可以添加和删除类。我们将使用querySelectorAll()方法选择HTML元素（兼容IE8及以上浏览器）。
添加类：
function addClass(elements, myClass) {
if (!elements) return;
if (typeof elements === 'string') elements = document.querySelectorAll(elements);
else if (elements.tagName) elements = [elements];
for (let i = 0; i < elements.length; i++) {
if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
elements[i].className += ' ' + myClass;
}
}
}删除类：
function removeClass(elements, myClass) {
if (!elements) return;
if (typeof elements === 'string') elements = document.querySelectorAll(elements);
else if (elements.tagName) elements = [elements];
const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
for (let i = 0; i < elements.length; i++) {
elements[i].className = elements[i].className.replace(reg, ' ');
}
}现代化方案：使用classList属性
IE10及以上浏览器支持classList属性，简化了类的操作。
添加类：
function addClass(selector, myClass) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => element.classList.add(myClass));
}删除类：
function removeClass(selector, myClass) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => element.classList.remove(myClass));
}总结
本文介绍了使用className和classList属性添加和删除CSS类的方法。掌握这些技巧，您可以轻松实现网页元素的动态效果，提升用户体验。
常见问题解答 (FAQs)
使用Vanilla JS添加或删除CSS类的目的？ 动态控制HTML元素的外观和行为，例如响应用户操作改变样式、显示/隐藏元素、创建动画效果等。
如何使用classList.add()添加多个类？ 将类名作为独立参数传递即可：element.classList.add("class1", "class2", "class3");
可以删除元素上不存在的类吗？ 可以，classList.remove()不会报错，只是不会执行任何操作。
如何检查元素是否包含特定类？ 使用classList.contains()方法，返回布尔值。
如何同时操作多个元素的类？ 使用querySelectorAll()选择元素，然后循环遍历并操作每个元素的类。
如何切换元素的类？ 使用classList.toggle()方法。
className和classList的区别？ className是字符串属性；classList是返回DOMTokenList对象的只读属性，提供更方便的类操作方法。
classList是否支持SVG元素？ 支持。
classList的浏览器兼容性如何？ 现代浏览器广泛支持，IE9及以下版本不支持。
可以链式调用classList方法吗？ 可以。
希望本文对您有所帮助！
以上是快速提示：使用香草JavaScript添加或删除CSS类的详细内容。更多信息请关注PHP中文网其他相关文章！
