使用 JavaScript 更改 HTML 元素的类
Valentine Kagwiria
2023年1月30日
2021年4月29日
- 在 JavaScript 中选择 HTML 元素
- 在 JavaScript 中改变适用于一个元素的所有类别
- 在 JavaScript 中的元素中插入一个额外的类
- 在 JavaScript 中删除元素中的类
- 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()
属性来实现。