更改元素类 JavaScript

类名在 HTML 中用作选择器，有助于为元素属性提供一些值。 document.getElementById() 方法用于返回文档中具有“id”属性的元素，“className”属性可用于更改/附加元素的类。

句法：

document.getElementById('myElement').className = "myclass";

示例 1：在此代码中，使用 onclick 事件将按钮的类从“default”更改为“changedClass”，从而将按钮的背景颜色从 RED 更改为 GREEN。

    
        Change an element class with javascript
        
            .default{
                background-color: red;
            }
            .changedClass{
                background-color: green;
            }
            #myPara{
                margin-top: 20px;
            }
            #myButton{
                padding: 10px;
            }
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        
        
            function changeClass() {
                document.getElementById('myButton').className = "changedClass";
                var button_class = document.getElementById('myButton').className;
                document.getElementById('myPara').innerHTML = "New class name: " 
                + button_class;
            }
        
    
    
        GeeksforGeeks
        Chenge class name of element
        Click Here!
        Old class name: default
    
                    

输出：

示例 2：在此代码中，使用 onclick 事件将按钮的类从“default”更改为“newclass1”和“newclass2”。

    
        Change an element class with javascript
        
            .default{
                background-color: red;
                padding:5px;
                border:1px solid black;
                border-radius:3px;
            }
            .newclass1 {
                color:white;
                font-size:16px;
                font-weight:bold;
                border:1px solid black;
            }
            .newclass2 {
                padding: 10px;
                background-color:green;
                border-radius:3px;
            }
                h1 {
                color:green;
            }
            body {
                text-align:center;
            }
        
        
            function changeClass() {
                document.getElementById('myButton').className = "newclass1";
                document.getElementById('myButton').classList.add("newclass2");
                var button_class = document.getElementById('myButton').className;
                document.getElementById('myPara').innerHTML = "New class name: "
                + button_class;
            }
        
    
    
        GeeksforGeeks
        Change class name of element
        Click Here!
        Old class name: default
    
                        

输出：