使用 JavaScript 更改 HTML 元素的类

1. 在 JavaScript 中选择 HTML 元素
2. 在 JavaScript 中改变适用于一个元素的所有类别
3. 在 JavaScript 中的元素中插入一个额外的类
4. 在 JavaScript 中删除元素中的类
5. JavaScript 中检查元素中是否使用了某个类

本文演示了如何响应 JavaScript 事件而更改 HTML 元素的类。

在 JavaScript 中选择 HTML 元素

毫无疑问，在 JavaScript 中选择 HTML 元素的最简单方法是通过 document.getElementById()。

例如，如果你需要选择类 ID 为 Students 的元素，请按以下步骤进行选择。

document.getElementById('Students')

在 JavaScript 中改变适用于一个元素的所有类别

使用元素的类 ID 选择元素后，可以更改其类或替换其所有类，如上所示。你将需要使用 .className 属性设置一个新值，以替换旧的类，如下所示。

Document.getElementById('Fruits').classname = 'Veggies';

在 JavaScript 中的元素中插入一个额外的类

你也可以在不更改任何现有类的情况下将新类添加到元素。你可以通过使用 += 运算符来添加新类来实现。

例如，

Document.getElementById('Subjects').className += 'Physics';

它将一个名为 Physics 的额外类添加到 Subjects 元素中的其他类。

在 JavaScript 中删除元素中的类

在不影响其他类的情况下删除元素中的单个类稍微复杂一些。你将需要将 .className.replace 与以下正则表达式一起使用。

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s 捕获字符串的开头和/或使用的任何单个空格字符。
• RemoveThis 是要删除的类的名称。
• (?!\S) 验证 RemoveThis 是完整的类名，并在末尾检查是否有任何非空格字符。换句话说，它确保将正则表达式放在字符串的末尾。
• g 是确保在添加类的所有情况下都根据需要执行替换命令的标志。

示例如下。

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

JavaScript 中检查元素中是否使用了某个类

要检查是否已将类应用于特定元素，可以使用上面的 regex。最好使用 if(); 实现声明以给出结果。例如：

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

如果检查结果为肯定，则输出将为 Class has been used；如果结果为否，则输出将为无输出，除非使用 else 语句定义了替代操作或输出。

不建议直接在 HTML 事件属性中编写 JavaScript 代码。这可能会使执行和降低应用程序速度变得更加困难。相反，你可以在函数中编写 JavaScript，在 onclick 属性中调用该函数，然后将事件从 HTML 代码移至 JavaScript。你可以使用 .addEventListener() 属性来实现。