如何在 JavaScript 中动态创建和应用 CSS 类？

在 JavaScript 中动态创建和应用 CSS 类可以帮助开发人员动态地改变页面的样式。本文将介绍如何在 JavaScript 中动态创建和应用 CSS 类。

动态创建 CSS 类

在 JavaScript 中动态创建 CSS 类，我们需要使用 document.createElement() 方法来创建一个 <style> 标签，然后使用 innerHTML 属性向其中添加 CSS 样式。最后，我们将 <style> 标签添加到 document.head 中。

const style = document.createElement('style');
document.head.appendChild(style);
style.innerHTML = '.new-class { color: red; }';

以上代码创建了一个名为 new-class 的 CSS 类，并设置该类中所有元素的颜色为红色。

动态应用 CSS 类

在 JavaScript 中动态应用 CSS 类，我们可以使用 element.classList.add() 方法来为元素添加 CSS 类。同样地，我们可以使用 element.classList.remove() 方法从元素中移除 CSS 类。

const element = document.querySelector('#element');
element.classList.add('new-class');    // 添加 CSS 类
element.classList.remove('new-class'); // 移除 CSS 类

以上代码将为 id 为 element 的元素添加一个名为 new-class 的 CSS 类，并将其从元素中移除。

总结

在 JavaScript 中动态创建和应用 CSS 类可以帮助开发人员动态地改变页面的样式。通过 document.createElement() 和 element.classList.add() 方法，我们可以轻松地创建和应用 CSS 类。