Los últimos tutoriales de desarrollo web
 

jQuery - Obtener y establecer clases CSS

❮ Anterior Siguiente Capítulo ❯

Con jQuery, es fácil de manipular el CSS de elementos.


Manipulación de jQuery CSS

jQuery dispone de varios métodos para la manipulación de CSS. Vamos a ver los métodos siguientes:

  • addClass() - Añade una o más clases de los elementos seleccionados
  • removeClass() - Elimina una o más clases de los elementos seleccionados
  • toggleClass() - Cambia entre la adición / eliminación de las clases de los elementos seleccionados
  • css() - Establece o devuelve el atributo de estilo

ejemplo de estilos

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

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

.blue {
    color: blue;
}

jQuery addClass() Método

El siguiente ejemplo muestra cómo agregar atributos de clase a los diferentes elementos. Por supuesto, puede seleccionar varios elementos, al agregar clases:

Ejemplo

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});
Inténtalo tú mismo "

También puede especificar varias clases dentro de la addClass() método:

Ejemplo

$("button").click(function(){
    $("#div1").addClass("important blue");
});
Inténtalo tú mismo "

jQuery removeClass() Método

El siguiente ejemplo muestra cómo eliminar un atributo de clase específica de diferentes elementos:

Ejemplo

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});
Inténtalo tú mismo "

jQuery toggleClass() Método

El siguiente ejemplo mostrará cómo utilizar el jQuery toggleClass() método. Este método se conmuta entre añadir / eliminar las clases de los elementos seleccionados:

Ejemplo

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});
Inténtalo tú mismo "

jQuery css() Método

El jQuery css() método se explicará en el siguiente capítulo.

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»

jQuery CSS Referencia

Para una visión completa de todos los métodos de jQuery CSS, por favor vaya a nuestro / CSS de referencia jQuery HTML .


❮ Anterior Siguiente Capítulo ❯