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:
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:
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 .