Cambiando la clase de un div usando Javascript

 In Javascript
[include slug="includes/ad1"]

Aqui les traigo un ejemplo de como usar solo Javascript para para cambiar la clase de div, usando una accion de un boton.

En el evento onclick() se acciona el Javascript, se puede usar cualquiera de los demas eventos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .caja1 {
            background-color: red;
            width: 300px;
            height: 300px;
        }
        .caja2 {
            background-color: rgb(37, 88, 153);
            width: 300px;
            height: 300px;
        }
    </style>


    <script>
        function cambiarClase() {
           var elemento =  document.getElementById("caja");

           if (elemento.className== "caja1") {
                elemento.className = "caja2"
           } else {
                elemento.className = "caja1"
           }
        }
    </script>
</head>
<body>

    <button onclick="cambiarClase()">Cambiar Clase</button>

    <div id="caja" class="caja1">

    </div>
    
</body>
</html>

 

 

Recent Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Notice: Undefined index: quick_contact_gdpr_consent in /home/hcspmsoc/public_html/wp-content/themes/jupiter/views/footer/quick-contact.php on line 46

Notice: Undefined index: third_party_gdpr in /home/hcspmsoc/public_html/wp-content/themes/jupiter/framework/helpers/wp_footer.php on line 60