如何在 JavaScript 中修改 CSS 类

介绍

在本教程中,您将学习如何使用JavaScript的classList对象来修改您的DOM操作项目的CSS类。

前提条件

一般的JavaScript知识. 要了解更多关于JavaScript的信息,请参阅《如何在JavaScript中编码》系列(https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)。
一般的CSS知识. 有关CSS的介绍,请参阅教程(How To Apply CSS Styles to HTML with Cascade and Specificity)(https://andsky.com/tech/tutorials/how-to-apply-css-styles-to-html-with-cascade-and-specificity)。

开始你的项目

创建一个index.html文件,并包含一个风格标签,包含 CSS 类和一个有id的段落元素:

 1[label index.html] 
 2<style>
 3  .colorText {
 4    color: purple;
 5  }
 6
 7  .boldText {
 8    font-weight: bold;
 9  }
10
11  .bigText {
12    font-size: 35px;
13  }
14</style>
15
16<p id="myText">
17  Hello World! 
18</p>

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

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

创建一个index.js文件,抓取你的段落元素的引用,然后调用classList.add()方法:

1[label index.js] 
2const myText = document.getElementById('myText');
3
4myText.classList.add('colorText');

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

您还可以使用classList.contains()方法检查段落元素中是否存在 CSS 类,以返回 Boolean:

1[label index.js] 
2const myText = document.getElementById('myText');
3
4console.log(myText.classList.contains('colorText')); // true

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

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

在您的 index.js 文件中,将更多的 CSS 类添加到您的段落元素中:

1[label index.js]
2const myText = document.getElementById('myText');
3
4myText.classList.add('boldText');
5myText.classList.add('bigText');
6console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

classList属性将每个额外的类存储在一个数组中. 如果您将myText.classList组合出来,则将输出包含您的 CSS 类的数组。

要检查数组中的每个 CSS 类的指定索引,请使用 classList.item() 方法:

1[label index.js]
2const myText = document.getElementById('myText');
3
4myText.classList.item('boldText'); // 2

要删除 CSS 类,请使用 classList.remove() 方法:

1[label index.js] 
2const myText = document.getElementById('myText');
3
4myText.classList.remove('bigText');
5console.log(myText.classList); // ['colorText', 'boldText'];

一旦您删除「myText.classList」,您删除的 CSS 类不会出现在数组中,也不会适用于您的段落元素。

现在你可以添加、检查和删除 CSS 类,让我们探索如何增强其他classList方法。

如何使用「classList」「.toggle()」方法

不要同时调用classList.add()和classList.remove(),您可以使用classList.toggle()方法:

要做到这一点,请在您的 index.js 文件中的一个按钮上实现事件倾听器:

1[label index.js] 
2textButton.addEventListener('click', () => {
3  myText.classList.toggle('newFont');
4});

每一次点击,classList.toggle()将添加 CSS 类,如果它不存在于 classList 数组中,然后返回 true。

1[label index.js] 
2const anotherClass = myText.classList.toggle('newSize');
3
4console.log(anotherClass); // true --> class was added

您也可以在「classList.toggle()」方法中作为可选的第二个参数添加一个Boolean,这将添加或删除 CSS 类,取决于第二个参数如何评估:

 1[label index.js]
 2const bool = false; 
 3
 4let firstToggle = myText.classList.toggle('newSize', bool);
 5console.log(firstToggle);
 6// false, 'newFont' already exists and will remove from classList array
 7
 8let secondToggle = shadesEl.classList.toggle('newColor', !bool);
 9console.log(secondToggle);
10// true, 'newColor' does not exist and will add the class

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

结论

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

有关进一步的阅读,请参阅文章如何在 DOM 中修改属性、类和风格和电子书理解 DOM - 文档对象模型。