How To Change DIV Class Name In Javascript [ with source code ]

In This Javascript Tutorial we will see How To Change DIV Css Class Name In JS Using Netbeans Editor .

Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw

Project Source Code:

JavaScript Tutorial: Change Div Class Name

    <style>
        
        .DefaultClass{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin-bottom: 20px;
        }
        
        .class1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
        }
        
        .class2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-bottom: 20px;
        }
        
    </style>
    
    <script>
        
        function func1()
        {
            document.getElementById('cls').className = "class1";
        }          
        
        function func2()
        {
            document.getElementById('cls').className = "class2";
        }
        
    </script>
    
</head>

<body>
    
    <div class="DefaultClass" id="cls"></div>
    <button onclick="func1();">Class 1</button>
    <button onclick="func2();">Class 2</button>

</body>

#js #javascript