JavaScript 向元素添加类

Ammar Ali 2024年2月15日
JavaScript 向元素添加类

本教程将讨论使用 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 文件中并使用浏览器打开它。

输出:

JavaScript 使用 classList 属性添加类

正如你在输出中看到的,有一个按钮和一些文本。当你按下此按钮时,文本的类别将被更改。

按下按钮时的输出:

JavaScript 使用按钮添加类

正如你在输出中看到的那样,由于类的变化,文本形状发生了变化。在此示例中,我们使用按钮来更改元素的类,但你可以更改要更改给定元素类的条件。你不能在 Internet Explorer 9 中使用 classList 属性。相反,你可以使用 += 运算符将该属性添加到给定元素。你必须使用以下行更改脚本标记内 myFun 函数的最后一行。

ob.className += " newclass";

你必须在类名前使用空格,因为可能还有其他类存在。

作者: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相关文章 - JavaScript Class