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

DOM （文档对象模型）是一种操作文档（HTML 文档）的方式。本文将讨论如何访问和设置 DOM 元素的类名。在 DOM 中，所有 HTML 元素都被定义为对象。我们将针对 CSS 使用 Javascript 来操作它们。

以下是我们将用于向 DOM 元素添加类的 Javascript 属性：

• classList 属性：它以 DOMTokenList 对象的形式返回类名。它有一个名为“add”的方法，用于将类名添加到元素中。

  句法：

  element.classList.add("className")

  例子：
  

  html

    
  
      
          .geek {
              background-color: green;
              font-size: 50px;
          }
      
  
    
  
    
      Try it
    
      Geeks for Geeks
    
      
          function myClass() {
              var elem = document.getElementById("gfg");
              
              // Adding class to div element
              elem.classList.add("geek"); 
          }
      
    
  
    

  
  
  
  
  输出：
  在点击按钮之前：
  

  点击按钮后：
  

• className 属性：此属性返回元素的类名。如果元素已经有一个类，那么它将简单地添加另一个类，否则它会将我们的新类附加到它。

  句法：

  HTMLElementObject.className

  例子：
  

  html

    
  
      
          .geekClass {
              background-color: green;
              text-align: center;
              font-size: 50px;
          }
      
  
    
  
    
      
          Geeks For Geeks
      
    
      Add Class
    
      
          function myClassName() {
              var element = document.getElementById("gfg");
                
              // Adding the class geekClass to element
              // with id gfg space is given in className
              // (" geekClass") as if there is already
              // a class attached to an element than our
              // new class won't overwrite and will append
              // one more class to the element 
              element.className += " geekClass"; 
          }
      
    
  
    

  
  输出：
  在点击按钮之前：
  
  点击按钮后：
  

支持的浏览器： classList 属性支持的浏览器如下：

• 铬 8+
• 歌剧 11.5+
• Safari 5.1+
• 边缘 10+
• 火狐 3.6+