JavaScript 为元素添加类名

在本文中，我们将学习如何为元素添加类名属性，并通过示例了解实现。 CSS 和 JavaScript 可以使用类名属性对具有指定类名的元素执行某些任务。可以通过多种方式使用 JavaScript 添加类名。

使用 。 className 属性：此属性用于将类名添加到所选元素。

句法：

它用于设置 className 属性。

element.className += "newClass";

它用于返回 className 属性。

element.className;

适当的价值：

• newClass ：它指定元素的类名。对于应用多个类，它需要用空格分隔。

返回值：字符串类型，表示元素的类或类列表，以空格分隔。

示例：此示例使用 .className 属性添加类名。

HTML

  

    JavaScript to add class name
    
    .addCSS {
        color: green;
        font-size: 25px;
    }
    

  

     
        GeeksforGeeks 
    
     A Computer Science portal for Geeks. 
  
     AddClass 
      
    
    
    function addClass() {
        var v = document.getElementById("p");
        v.className += "addCSS";
    }
    

  

输出：

.className 属性

使用.add() 方法：此方法用于将类名添加到所选元素。

句法：

element.classList.add("newClass");

示例：本示例使用 .add() 方法添加类名。

HTML

  

    
    .addCSS {
        background-color: green;
        color: white;
        padding: 20px;
        font-size: 25px;
    }
    

  

     
        GeeksforGeeks 
    
     A Computer Science portal for Geeks. 
  
     AddClass 
      
    
    
    function addClass() {
        var elem = document.getElementById("p");
        elem.classList.add("addCSS");
    }
    

  

输出：

.add() 方法

支持的浏览器：

• 谷歌浏览器 22.0
• 微软边缘 12.0
• 互联网浏览器 5.0
• 火狐1.0
• 歌剧 8.0
• Safari 1.0

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。