Tutorial JQuery | Estilos CSS

Aplicar estilos CSS

El método css() nos permite asignar dinámicamente estilos CSS a los elementos HTML.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Acceso a los elementos I</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        p { color:blue;width:200px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            alert("Haz clic para cambiar el estilo de los párrafos");

            // Observa que se pone almohadilla antes del id
            $("p").css( "color","yellow" );
            $("p").css( "background-color","red" );

            alert("Haz clic para cambiar el estilo de los párrafos");

            // En este caso modificamos varias propiedades CSS a la vez poniéndolas entre corchetes (realmente
            // estamos creando un array asociativo en JavaScript) y separándolas por coma.
            // Fíjate también en que de este modo no usamos el nombre de la propiedad CSS sino su
            // equivalente en lenguaje JavaScript (consulta el enlace que proporcionamos algo más abajo)
            $("p").css( {color : "white", backgroundColor : "black" } );
        });

    </script>
  </head>

  <body>

      <p>Esto es un párrafo</p>
      <p>Esto es otro párrafo</p>
      <p>Esto es un tercer párrafo</p>

  </body>

</html>

Ejemplo

Vea también: [ Acceso a CSS ] - [ css() ] - [ Propiedades del objeto Style en JavaScript ]

Cambiar clase CSS

Con el método addClass() podremos asignar clases CSS a elementos HTML, y con removeClass() es posible eliminar dicha asignación.

En el siguiente ejemplo, al cargarse la página se aplica la clase CSS 'rojo' a todos los <p> y <div>, así como al span cuyo atributo 'id' es 'span2':

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Estilos CSS con JQuery I</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p, span, div { color:blue;font-weight:bold; }
        .rojo { color:red;font-weight:normal;text-decoration:underline; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            alert("Pulsa para cambiar las clases CSS de los elementos");

            $("p").addClass("rojo");
            $("#span2").addClass("rojo");
            $("div").addClass("rojo");

            alert("Pulsa para eliminar las clases CSS de los elementos");

            $("p").removeClass("rojo");
            $("#span2").removeClass("rojo");
            $("div").removeClass("rojo");
        });

    </script>
  </head>

  <body>

    <p>Esto es un párrafo</p>
    <p>Esto es un párrafo</p>
    <p>Esto es un párrafo</p>
    <p>Esto es un párrafo</p>

    <span>Esto es un 'span'</span><br />
    <span id="span2">Esto es un 'span'</span><br />
    <span>Esto es un 'span'</span><br />

    <div>Esto es un 'div'</div>

  </body>

</html>

Ejemplo

Vea también: [ Acceso a CSS ] - [ addClass() ] - [ removeClass() ]

Cargar otra hoja de estilos

Si necesitamos cambiar de archivo de hoja de estilos CSS en cualquier momento tras haberse cargado la página podemos hacerlo accediendo a la etiqueta html <link> tras haberla definido con un atributo 'id' (de haber sólo una etiqueta podríamos acceder también usando su nombre):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Hojas de estilo con JQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Agregamos la etiqueta HTML 'link' pero sin hoja de estilos -->
    <link id="estilos" rel='stylesheet' href='#' type='text/css' />

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            $("#estilos").attr("href", "estilos.css");
        });

    </script>
  </head>

  <body>

    <p>Esto es un párrafo</p>
    <p class="rojo">Esto es un párrafo</p>
    <p>Esto es un párrafo</p>
    <p>Esto es un párrafo</p>

    <span class="rojo">Esto es un 'span'</span><br />
    <span>Esto es un 'span'</span><br />
    <span>Esto es un 'span'</span><p />

    <div id="div1">Esto es un 'div'</div>

  </body>

</html>

Ejemplo

Tutorial de JQuery

Aplicar estilos CSS

Cambiar clase CSS

Cargar otra hoja de estilos