使用 JavaScript 更改 HTML 元素的类

Valentine Kagwiria 2023年1月30日 2021年4月29日
  1. 在 JavaScript 中选择 HTML 元素
  2. 在 JavaScript 中改变适用于一个元素的所有类别
  3. 在 JavaScript 中的元素中插入一个额外的类
  4. 在 JavaScript 中删除元素中的类
  5. JavaScript 中检查元素中是否使用了某个类
使用 JavaScript 更改 HTML 元素的类

本文演示了如何响应 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() 属性来实现。