Operaciones CSS de jQuery

Una parte muy importante de jQuery es la posibilidad de manipular el DOM.

jQuery proporciona métodos efectivos para manipular los estilos de los elementos.

En este capítulo, explicaremos cómo agregar o eliminar clases CSS en el DOM.

jQuery y operaciones de CSS

Con jQuery, podemos manipular fácilmente los estilos de los elementos.

Tenemos los siguientes métodos jQuery para operaciones de CSS:

• addClass()

• removeClass()

• toggleClass()

• css()

A continuación, le mostraremos cómo usar cada método.

Método jQuery addClass()

jQuery addClass()El método agrega una o más nombres de clase al elemento seleccionado.

El siguiente ejemplo agrega una clase al primer elemento <p>:

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

Se puede agregar varias clases (separadas por espacio) a un elemento seleccionado, como se muestra a continuación:

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

Método jQuery removeClass()

jQuery removeClass()El método elimina una o más nombres de clase del elemento seleccionado.

El siguiente ejemplo elimina una clase de todos los elementos <p>:

$("button").click(function(){
　　$("p").removeClass("highlight");
});

Se puede eliminar una o más clases (separadas por espacio) de un grupo de elementos seleccionados, como se muestra a continuación:

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

Si no se especifica el nombre de la clase en los parámetros, se eliminarán todas las clases:

$("button").click(function(){
　　$("p").removeClass();
});

Método toggleClass() de jQuery

jQuery toggleClass()El método en agregar/Cambia entre agregar y eliminar una o más clases para los elementos seleccionados.

El siguiente ejemplo cambia entre agregar y eliminar el nombre de la clase "anotherClass" para todos los elementos <p>:

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

Este método verifica el nombre de la clase especificada de cada elemento:

• Si falta el nombre de la clase, se agregará

• Si ya se ha establecido el nombre de la clase, se eliminará

Método css() de jQuery

jQuery css()El método obtiene o establece una o más propiedades de estilo de los elementos seleccionados.

jQuery css()Se explicarán los métodos en el siguiente capítulo.

Referencia de CSS de jQuery

Para obtener referencias completas de métodos CSS, visite nuestrajQuery HTML / Referencia de CSS.