如何在JavaScript中向DOM元素添加类？

HTML是一种标记语言，用于创建网页的有用元素。DOM（文档对象模型）用于操作HTML文档。在DOM中，所有元素都被定义为对象。HTML文档中的样式可以通过CSS来完成。在这里，JavaScript被用来操作它们。

下面描述了向DOM元素添加类的方法。

使用className

如果元素已存在类，则它只会添加另一个类；如果不存在，则将元素添加到新类。

语法

在JavaScript中添加类元素的语法如下：

HTMLElemObj.className

示例1

在这个例子中，我们尝试在JavaScript中向DOM元素添加一个类：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Add an element to class </title>
   <style>
      .context{
         padding: 40px;
         border: 2px solid #A47167;
      }
      .highlight{
         background: lightblue;
      }
   </style>
</head>
<body>
   <div class="context" id="contextid">
      <p>By using className property we can add a class to a given element</p>
      <button type="button" onclick="nClass();">Click here to add a new class </button>
   </div>
   <script>
      function nClass(){
         var elem = document.getElementById("contextid");
         elem.className += " highlight";
      }
   </script>
</body>
</html>

使用classList

这种方法有一个名为“add”的方法，用于向元素添加类名。

语法

classList的语法如下：

elem.classList.add("className")

示例2

在这个例子中，我们将学习如何使用JavaScript向DOM元素添加类：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Add a class to element</title>
   <style>
      .tutorix {
         background-color: orange;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <button onclick="myClass()">Click</button>
   <div id="tp">Tutorilas Point</div>
   <script>
      function myClass() {
         var elem = document.getElementById("tp");
         elem.classList.add("tutorix");
      }
   </script>
</body>
</html>

执行上述代码后，它将显示一个名为click的按钮以及显示文本“Tutorialspoint”的DOM元素。

单击按钮后，将向元素添加一个新类，从而更改其样式。

更新于：2022年8月26日

915 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告