Change Class Name Using Javascript

How To Change DIV Class Name In Javascript

change classname using javascript



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




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Tutorial: Change Div Class Name</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <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>
</html>




Share this

Related Posts

Previous
Next Post »