在前端开发中，我们经常需要使用 JavaScript 动态地对网页上的元素进行样式修改。其中一个常见需求就是给某个元素添加 CSS 类，从而改变它的样式。
本文将介绍如何通过 JavaScript 实现给元素添加 CSS 类的操作，并提供相应的示例代码和学习指导。
什么是 CSS 类
CSS 类是一种可以应用到网页元素上的样式集合。当一个元素应用了某个 CSS 类，它就会拥有该类所定义的样式属性。
通常情况下，我们通过在 HTML 中设置 class 属性来为元素指定 CSS 类。例如：
<div class="my-class">Hello, world!</div>
上述代码中，<div> 元素应用了名为 my-class 的 CSS 类。
除此之外，我们还可以通过 JavaScript 动态地为元素添加或删除 CSS 类。
在 JavaScript 中，我们可以通过以下两种方式给元素添加 CSS 类：
1. 使用元素的 classList 属性
每个 DOM 元素都有一个名为 classList 的属性，它是一个包含当前元素所有类名的 DOMTokenList 对象。我们可以通过调用 add() 方法向 classList 中添加一个新类名，从而实现为元素添加 CSS 类的操作。
示例代码如下：
const element = document.querySelector('#my-element');
element.classList.add('my-class');上述代码中，我们首先使用 querySelector() 方法获取了 ID 为 my-element 的元素，并将其赋值给 element 变量。然后，我们调用了 classList 对象的 add() 方法，将名为 my-class 的 CSS 类添加到该元素上。
2. 直接修改元素的 className 属性
除了使用 classList 属性外，我们还可以直接修改元素的 className 属性，从而实现为元素添加或删除多个 CSS 类的操作。
示例代码如下：
const element = document.querySelector('#my-element');
element.className += ' my-class';上述代码中，我们同样是通过 querySelector() 方法获取了 ID 为 my-element 的元素，并将其赋值给 element 变量。然后，我们将 className 属性与字符串 ' my-class' 相加，从而实现为该元素同时添加多个 CSS 类名的操作。
如何移除已添加的 CSS 类
除了添加 CSS 类之外，我们还可以通过 JavaScript 移除已添加的 CSS 类。这可以通过 classList 对象的 remove() 方法或 className 属性的修改来完成。
示例代码如下：
// 使用 classList.remove() 移除已添加的 CSS 类
const element = document.querySelector('#my-element');
element.classList.remove('my-class');
// 使用 className 属性修改已添加的 CSS 类
const element = document.querySelector('#my-element');
element.className = element.className.replace('my-class', '');上述代码中，我们分别介绍了使用 classList.remove() 方法和修改 className 属性来移除 CSS 类的两种方法。
总结
本文介绍了如何通过 JavaScript 给元素添加或移除 CSS 类，涵盖了使用 classList 属性和修改 className 属性两种方式。对于初学者来说，建议优先考虑使用 classList 属性，因为它更加灵活、易于操作。
在实际开发中，我们经常需要根据用户交互或其他动态变化来修改网页样式。掌握动态修改 CSS 类的技能，可以帮助我们更加方便地实现这些需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27238