CSS 是前端开发中必不可少的一部分，它可以帮助我们创建漂亮的界面和交互。有时候，我们需要动态地更改或删除已经定义的 CSS 类，以实现动态效果。本文将介绍如何在运行时更改或删除 CSS 类定义。
更改 CSS 类
要动态更改 CSS 类，我们可以使用 JavaScript 来修改元素的 class 属性。以下是一个示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------- ------------ - -------------------- ------- --- --------- ------- ------ --- --------- ----------------------- ---------- --------- ---------- ------------- - ------ - - -------------------------------- -------------- - ----------- --- ---------- -------- ------------------------------ -------------- ------- -------
在上面的代码中，我们首先定义了一个 CSS 类 .highlight，它将元素背景色设置为黄色。然后我们在 <p> 元素中使用这个类。
接下来，我们定义了一个 changeClass() 函数，该函数获取 id 为 demo 的元素，并将其 class 属性设置为 "newClass"。最后，我们在 HTML 中添加一个按钮，使得当用户点击按钮时就会调用 changeClass() 函数。
当用户点击按钮时，changeClass() 函数将会以新的 class 替换原有的 class，即把元素的背景颜色从黄色改变为默认的白色。
删除 CSS 类
要删除一个已经定义的 CSS 类，我们可以使用 classList.remove() 方法。以下是一个示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------- ------------ - -------------------- ------- --- --------- ------- ------ --- --------- ----------------------- ---------- --------- ---------- ------------- - ------ - - -------------------------------- ----------------------------------- --- ---------- -------- ------------------------------ -------------- ------- -------
在上面的代码中，我们首先定义了一个 CSS 类 .highlight，它将元素背景色设置为黄色。然后我们在 <p> 元素中使用这个类。
接下来，我们定义了一个 removeClass() 函数，该函数获取 id 为 demo 的元素，并使用 classList.remove() 方法将其 highlight 类删除。最后，我们在 HTML 中添加一个按钮，使得当用户点击按钮时就会调用 removeClass() 函数。
当用户点击按钮时，removeClass() 函数将会删除 highlight 类，元素的背景颜色将恢复为默认的白色。
总结
在本文中，我们介绍了如何在运行时更改或删除已经定义的 CSS 类。我们可以使用 JavaScript 来修改元素的 class 属性，以实现动态效果。此外，我们还演示了如何使用 classList.remove() 方法来删除已经定义的 CSS 类。这些技巧对于实现动态交互和视觉效果非常有用。
希望本文能够为你提供帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27028