• Artículo

Modificando la CSS

Ya hemos adelantado que con JQuery podemos modificar el DOM a nuestro antojo, y los estilos y clases CSS no iban a quedar fuera. Las clases más interesantes para manejo de CSS con JQuery son:

  • .addClass(): añade una clase a cada uno de los elementos del selector.
  • .css(): devuelve el valor de la propiedad 'Style' para el primer elemento.
  • .hasClass(): indica si alquno de los elementos posee la clase.
  • .removeClass(): quita una determinada clase de los elementos que la tengan
  • .toogleClass(): añade la clase si no está añadida y la elimina si estuviese presente.
  • .attr('class','nuevaclase'): no maneja clases propiamente dicho, si no que substituye todas las clases actuales por la nueva clase (fíjate que no tenemos función para eliminar todas las clases).

Para mostrar cómo modificar dinámicamente la css aplicada a uno o más elementos vamos a introducir un concepto previo: sprites. Los sprites son pequeñas imágenes agrupadas en una única imagen, pensada para mostrar parcialmente. De esta forma podemos mostrar distintas imágenes en una página web cargando un único archivo de imagen, con lo cual reducimos el tráfico y el tiempo de carga de la página.

Partimos de una simple página web con un div y un select. El div tiene asignado una imagen de fondo como la mostrada a continuación:

Tenemos una clase común que simplemente fuerza el tamaño del div para que solo se vea uno de los iconos y establece la imagen de fondo:

div.sprite{
 border-style: solid;
 border-width: 1px; 
 width:40px;
 height:40px;
 background-image:url('./images/IconSet.png');
 background-repeat:no-repeat;
 }

Para complementar esta clase se le suman otras 9, una por cada icono que queramos mostrar. Así por ejemplo la clase para mostrar la flecha hacia la derecha de color verde será:

div.Right_V{ background-position:-40px -80px; }

Podemos imaginar el div como una ventana, que me permite ver el fondo. Si ponemos la imagen de fondo en esas coordenadas se moverá hacia arriba y hacia la izquierda, alineando nuestra ventana con la imagen de la flecha verde.


Efecto con sprites: la pequeña imagen que se muestra realmente es una parte de una imagen mayor

Para realizar este ejemplo basta con añadir un select con las distintas clases como valores

<select onchange="SetClass(this.value)">
 <option value="Right_N">Derecha naranja</option>
 <option value="Right_V">Derecha verde</option>
 <option value="Right_A">Derecha azul</option>
 <option value="Down_N">Abajo naranja</option>
 <option value="Down_V">Abajo verde</option> 
 <option value="Down_A">Abajo azul</option>
 <option value="RSS_N">RSS naranja</option>
 <option value="RSS_V">RSS verde</option>
 <option value="RSS_A">RSS azul</option> 
</select>

Y escribir la sentencia SetClass para que  busque el div correspondiente y le cambie la clase. Tan sencillo cómo esto:

<script type="text/javascript">
 function SetClass(value) {
   var posicion = $("#display").attr('class','sprite '+ value);
 }

No utilizamos ninguna función específica de CSS porque lo que necesitamos es sobre escribir completamente el atributo class. Con las funciones de CSS podríamos añadir clases a las existentes o eliminarlas por nombre, pero no substitución directa. Puede consultarse el código completo del ejemplo en la página incluida en el siguiente iframe.