0

Buenos dias, estoy usando materialize para el diseño de mi pagina, tengo una funcion para cambiar el background-color a un div con jquery. El problema que tengo es que el color no cambia porque las clases de colores de materialize vienen con "!important", por lo cual la función si se ejecuta pero el color no cambia. Alguna idea?

2 respuestas 2

0

Materialize posee su paleta de colores y no debería ser modificada, por eso trae los !important.

Te recomiendo modificar el color del div cambiando la clase del color que quieres, no modificando el atributo background-color.

0

Si quieres modificar el color solo debes crear tus propios estilos e igual que Materialize agregar la etiqueta !important.

Como ves en el ejemplo primero agrego un color rojo con las clases de Materialize y luego cambio con JQuery las clases red por myclassColor2.

PDT: No necesariamente debes remover la clase de Materialize, con agregar tus clases personalizadas con la etiqueta mencionada anteriormente es suficiente para que ellas prevalezcan sobre las de Materialize, yo removí las clases red para hacerlo dinamicamente.

Espero que te sea de utilidad.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

        <!-- Compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
        <style>
            .div {
                height: 200px;
            }

            .myclassColor{
                background-color: #198c52 !important;
            }

            .myclassColor2{
                background-color: #19fc59 !important;
            }

        </style>
        <script>
            $(document).ready(function () {
                $('#btn1').click(function () {
                    if ($('#div1').hasClass('red')) {
                        $('#div1').removeClass('red');
                        $('#div1').addClass('myclassColor');
                    } else {
                        $('#div1').removeClass('myclassColor');
                        $('#div1').addClass('red');
                    }
                })
                $('#btn2').click(function () {
                    if ($('#div2').hasClass('red')) {
                        $('#div2').removeClass('red');
                        $('#div2').addClass('myclassColor2');
                    } else {
                        $('#div2').removeClass('myclassColor2');
                        $('#div2').addClass('red');
                    }
                })
            });
        </script>

    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col s6 div red" id="div1"></div>
                <div class="col s6 div red" id="div2"></div>
            </div>
            <input type="button" id="btn1" value="CAMBIAR COLOR DIV #1">
            <input type="button" id="btn2" value="CAMBIAR COLOR DIV #2">
        </div>

    </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.