Modificación de estilos

JQuery permite modificar facilmente los estilos y las propiedades CSS de nuestra página web

Añadir o eliminar propiedades CSS

Mediante los métodos addClass() y removeClass() podemos asignar o quitar una clase CSS de cualquier elemento

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn01').click(function() {
            $('#div01').addClass('important color');
        });
        $('#btn02').click(function() {
            $('#div01').removeClass('color');
        });
        </script>
        <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .color {
            color: #D5322D;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='div01'>Texto de ejemplo</div><br/>
        <button id='btn01'>Añadir clases important y color</button>
        <button id='btn02'>Eliminar clase color</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732190392&k=d926f4701f0ead8778d5394efbbf1043&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo se añaden los estilos important y color al elemento con id div01 cuando pulsemos el botón btn01 y se elimina el estilo color

Manipulación de las propiedades CSS

El método css() nos permite consultar o modificar cualquier propiedad de la hoja de estilos de un elemento HTML

Tiene la siguiente sintaxis:

css('nombre_propiedad', 'valor');

En caso de que sólo queramos consultar la propiedad, omitiremos el parámetro valor y si queremos modificarlo, usaremos ese parámetro

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn03').click(function() {
            $('.pcolor').css('background-color', 'yellow');
        });
        </script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p class='pcolor' style='background-color:#FF5555'>Primer párrafo</p>
        <p class='pcolor' style='background-color:#55FF55'>Segundo párrafo</p>
        <p class='pcolor' style='background-color:#5555FF'>Tecer párrafo</p>
        <button id='btn03'>Cambiar color a todos los párrafos</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732190392&k=d926f4701f0ead8778d5394efbbf1043&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo se han usado tres párrafos distintos con un estilo para el color de fondo distinto, si pulsamos el botón con id btn03 podemos comprobar que con el método css hemos cambiado todos los párrafos a color amarillo

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Modificación de estilos

Modificación de estilos

Añadir o eliminar propiedades CSS

Manipulación de las propiedades CSS

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Modificación de estilos

Añadir o eliminar propiedades CSS

Manipulación de las propiedades CSS

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies