介绍

在本教程中，您将学习如何使用 JavaScriptclassList对象为您的 DOM 操作项目修改 CSS 类。该classList对象允许您调整分配给 HTML 元素的 CSS 类。

先决条件

• JavaScript 的一般知识。要了解有关 JavaScript 的更多信息，请查看如何在 JavaScript 中编码系列。
• CSS的一般知识。有关 CSS 的介绍，请查看教程How To Apply CSS Styles to HTML with Cascade and Specificity。

开始你的项目

创建一个index.html文件，并包含一个style带有 CSS 类的标签和一个带有以下内容的段落元素id：

 <style>
  .colorText {
    color: purple;
  }

  .boldText {
    font-weight: bold;
  }

  .bigText {
    font-size: 35px;
  }
</style>

<p id="myText">
  Hello World! 
</p>

现在让我们使用classList属性修改您的文本并应用您的 CSS 类。

使用.add()和.contains() classList方法

创建一个index.js文件，获取对段落元素的引用，然后调用该classList.add()方法：

 const myText = document.getElementById('myText');

myText.classList.add('colorText');

内置classList.add()方法将类应用于您的 HTML 元素。在这种情况下，段落元素中的文本现在将显示为紫色。

您还可以使用classList.contains()返回布尔值的方法检查段落元素中是否存在 CSS 类：

 const myText = document.getElementById('myText');

console.log(myText.classList.contains('colorText')); // true

由于 CSS 类colorText存在于您的段落元素中，您的调用将返回true.

应用.item()和.remove() classList方法

在您的index.js文件中，向段落元素添加更多 CSS 类：

const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

该classList属性将每个附加类存储在一个数组中。如果您使用 console out myText.classList，则会输出一个包含您的 CSS 类的数组。

要检查数组中每个 CSS 类的指定索引，请调用该classList.item()方法：

const myText = document.getElementById('myText');

myText.classList.item('boldText'); // 2

要删除 CSS 类，请使用以下classList.remove()方法：

 const myText = document.getElementById('myText');

myText.classList.remove('bigText');
console.log(myText.classList); // ['colorText', 'boldText'];

一旦您退出myText.classList，您删除的 CSS 类不会出现在数组中，也不会应用于您的段落元素。

现在您可以添加、检查和删除 CSS 类，让我们探索如何放大其他classList方法。

处理classList .toggle()方法

您可以使用该方法，而不是同时调用classList.add()和：classList.remove()classList.toggle()

为此，请在index.js文件中的按钮上实现事件侦听器：

 textButton.addEventListener('click', () => {
  myText.classList.toggle('newFont');
});

每次单击时，classList.toggle()如果classList数组中不存在 CSS 类，将添加它并返回true. 如果 CSS 类存在，该方法将删除该类并返回false.

 const anotherClass = myText.classList.toggle('newSize');

console.log(anotherClass); // true --> class was added

您还可以在classList.toggle()方法中添加一个布尔值作为可选的第二个参数。这将添加或删除 CSS 类，具体取决于第二个参数的计算方式：

const bool = false; 

let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' already exists and will remove from classList array

let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' does not exist and will add the class

该classList.toggle()方法支持使用较短的代码行添加和删除 CSS 类，无论它们是否存在于您的数组中。

结论

该classList属性允许在 JavaScript 中更改 HTML 元素及其 CSS 类的更高性能和功能。

如需更多阅读，请查看文章如何修改 DOM 中的属性、类和样式以及电子书了解 DOM — 文档对象模型。