How to remove class styles dynamically from div?

A simple button to remove class styles from div dynamically.


<!DOCTYPE html>
<html>
<head>
    <style>
        .remStyle {
            width: 50%;
            padding: 25px;
            background-color: #50ff5d;
            color: black;
            font-size: 25px;
            box-sizing: border-box;
        }

        button {
            background-color: #ff7600; 
            border: none;
            color: black;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
<body>

<!--test my blog-->

<button><a href='http://phpjavascript.com'>Try it</a></button>
<button><a href='http://phpjavascript.com'>Home</a></button>

<!--test-->
<button onclick="myFunction()">Try it</button>

<div id="remDIV" class="remStyle">
    Hello World.
</div>

<script>
    function myFunction() {
        var element = document.getElementById("remDIV");
        element.classList.remove("remStyle");
    }
</script>

</body>
</html>

Result



No comments:

Post a Comment

Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts