JavaScript 向元素添加类
Ammar Ali
2024年2月15日
本教程将讨论使用 JavaScript 中的 classList 属性向给定元素添加类。
使用 JavaScript 中的 classList 属性向给定元素添加类
如果要向 JavaScript 中的给定元素添加类，可以使用 classList 属性。首先，你必须获取给定的元素，最简单的方法是使用其 id 来获取它。假设没有给元素一个 id；在这种情况下，你可以给它一个唯一的 id 并使用 JavaScript 中的 getElementById 属性获取元素并将其存储在一个变量中。之后，你可以使用该变量通过 classList 属性更改其属性。例如，让我们使用按钮更改文本的类。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
在上面的代码中，我们有一个样式标签，我们在其中设置类对象的属性；在 body 标签内，我们有一个按钮和一些文本，在 script 标签内，我们正在使用其 id 更改文本的类。在此示例中，样式表和 JavaScript 代码放在同一个 HTML 文件中，但你也可以将它们放在单独的文件中并将它们链接到 HTML 文件。要运行上述代码，你需要将代码复制到一个 HTML 文件中并使用浏览器打开它。
输出：
正如你在输出中看到的，有一个按钮和一些文本。当你按下此按钮时，文本的类别将被更改。
按下按钮时的输出：
正如你在输出中看到的那样，由于类的变化，文本形状发生了变化。在此示例中，我们使用按钮来更改元素的类，但你可以更改要更改给定元素类的条件。你不能在 Internet Explorer 9 中使用 classList 属性。相反，你可以使用 += 运算符将该属性添加到给定元素。你必须使用以下行更改脚本标记内 myFun 函数的最后一行。
ob.className += " newclass";
你必须在类名前使用空格，因为可能还有其他类存在。
作者： Ammar Ali
