Cambiar el estilo de los elementos con jQuery

Existen dos formas inmediatas de poder cambiar el estilo de un elemento, una de ellas consiste en añadir o remover la clase CSS que contiene los atributos de estilo, haciendo que el elemento tome los valores en base a su nueva clase o los pierda al removerla. Por otro lado, la segunda forma de llevarlo a cabo se basa en aplicar los estilos directamente a los elementos del DOM, una forma más evidente de hacerlo pero mucho más laboriosa.

En este artículo estudiaremos como cambiar el estilo mediante la primera opción mencionada, añadiendo y quitando clases. Vamos a ver cómo jQuery hace que sea fácil de realizar dichos cambios.

Añadir y eliminar nombres de las clases con jQuery

La adición y eliminación de nombres de clases en un elemento, representa una de las principales bases del dinamismo que nos ofrece jQuery. Mediante esta sencilla operación el estilo de nuestro documento puede cambiar por completo, mostrando una representación estilística totalmente nueva basada en algún evento que dispare el cambio de clase.

Como principio básico debemos recordar que una clase es una colección de atributos de estilo definida mediante CSS y que se puede aplicar a uno o más elementos al mismo tiempo. A diferencia de un identificador, la clase se puede encontrar suministrada en diferentes elementos y un mismo elemento puede tener más de una sola clase, por lo que se le puede asignar cualquier número de nombres de clase que deseemos.

En HTML, el atributo indicado para proporcionar la clase lleva por nombre “class” y se utiliza para dar los nombres en forma de cadena, los cuales en caso de ser más de uno tienen que ser delimitados por espacios. Por ejemplo:

<div class="unaClase otraClase otraClaseMas">Esto es un div con 3 clases</div>

Por desgracia esta cadena no puede ser manejada como un arreglo de nombres, esto significa que cada vez que deseemos agregar un nuevo nombre al atributo clase o necesitemos remover alguno de estos nombres, tenemos que traer la cadena y analizarla para determinar los nombres individuales de cada clase ya existente en el atributo y agregarlas de nuevo, todo con su espacio delimitador correspondiente.

Si bien esto no es una tarea muy difícil de realizar, resulta bastante decepcionante el hecho de tener que escribir un código para controlar todo esto. Por suerte, gracias al uso de jQuery podemos brincar todo esto, basta con utilizar el comando “addClass” para realizar la operación.

Agregar clases

La función “addClass” añade los nombres de clases especificados a todos los elementos envueltos en el conjunto mediante jQuery, recibe como parámetro una cadena que contiene el nombre de clase a agregar, o si son varios nombres entonces la cadena contará con varias palabras delimitadas por espacios. Finalmente la función nos regresará un nuevo conjunto envuelto, donde a sus elementos se les fue agregada la clase.

jQuery("div").addClass("unaClase");

En el ejemplo anterior agregamos la clase “unaClase” a todos los elementos de tipo div los cuales fueron envueltos en el conjunto mediante jQuery, esta clase puede ser definida en una hoja de estilo o dentro del mismo código HTML entre las etiquetas de estilo y variará según el estilizado que deseemos dar, si por ejemplo deseamos agregar letra de color verde a todos los div, nuestra clase estaría definida de la siguiente manera:

.unaClase{
    color: green;
}

Quitar clases

La eliminación de nombres de clase resulta igual de sencilla que la operación de añadir, basta con utilizar la función “removeClass” la cual quita el nombre de la clase o clases especificadas, de cada elemento del conjunto envuelto. Al igual que “addClass” recibe una cadena de parámetro y nos regresa un nuevo conjunto envuelto.

jQuery("div").removeClass("unaClase");

Con esta sentencia quitaríamos el texto de color verde en todas nuestras capas div, dejando únicamente las otras clases que pertenecían previamente a los elementos.

Agregar y quitar clases de manera intercalada

Existe la posibilidad de que en vez de agregar o quitar una clase de manera definitiva queramos simplemente intercalar el estilo al momento de dispararse una acción, es decir, muchas veces al pasar nuestro mouse sobre un elemento deseamos que este cambie de color pero una vez desenfocado queremos que vuelva a su estilo anterior. Para estas ocasiones jQuery nos brinda la función “toggleClass”.

Este comando agrega el nombre de clase especificada si esta no existe en el elemento, o en su defecto la quita de los elementos que ya la poseen. Hay que tener en cuenta que cada elemento se prueba individualmente, por lo que algunos elementos pueden tener el nombre de la clase y otros no.

La función “toggleClass” es muy útil al momento de requerir cambios visuales entre elementos de manera rápida y sencilla. Por ejemplo, si creamos una función como la siguiente:

function estilo() {
    jQuery('div').toggleClass('unaClase');
}

Cada vez que la mandemos llamar en un evento jQuery se encargará de añadir o quitar la clase a los elementos de capa, con esto el texto cambiará de su color normal al verde y para después regresar.