Obtener y establecer clases CSS de jQuery

A través de jQuery, es fácil operar con elementos CSS.

Operaciones CSS de jQuery

jQuery tiene varios métodos para operar CSS. Vamos a aprender los siguientes:

  • addClass() - Agregar una o más clases a los elementos seleccionados
  • removeClass() - Eliminar una o más clases de los elementos seleccionados
  • toggleClass() - Realizar la operación de agregar/eliminar clases en los elementos seleccionados
  • css() - Establecer o devolver atributos de estilo

Hoja de estilo de ejemplo

La siguiente hoja de estilos se utilizará para todos los ejemplos de esta página:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

Método jQuery addClass()

El siguiente ejemplo muestra cómo agregar propiedades de clase a diferentes elementos. Por supuesto, también puede seleccionar múltiples elementos al agregar clases:

Ejemplo

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Prueba por ti mismo

También puede especificar múltiples clases en el método addClass():

Ejemplo

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Prueba por ti mismo

Método jQuery removeClass()

El siguiente ejemplo demuestra cómo eliminar propiedades de clase específicas en diferentes elementos:

Ejemplo

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Prueba por ti mismo

Método jQuery toggleClass()

El siguiente ejemplo mostrará cómo utilizar el método jQuery toggleClass(). Este método realiza la operación de agregar/eliminar clases en los elementos seleccionados:

Ejemplo

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Prueba por ti mismo

Método jQuery css()

En el siguiente capítulo, explicaremos el método jQuery css().

Manual de referencia de jQuery HTML

Para obtener el contenido completo de los métodos jQuery CSS, por favor visite nuestra Manual de operaciones de jQuery CSS