JavaScript 向元素添加类

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 向元素添加类

作者：迹忆客最近更新：2024/03/13 浏览次数：

本教程将讨论使用 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";

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

上一篇：使用 JavaScript 切换类

下一篇：使用 JavaScript 在 HTML 中使用按钮清除文本区域

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享