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)

Monday, February 26, 2018

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

More Posts

FOLLOW