JQuery – #05. CSS

En la lección anterior trabajamos con elementos HTML: cómo extraer, modificar y añadir información a un elemento y a sus atributos.

En esta ocasión veremos cómo trabajar con las propiedades CSS de estos elementos.

Así, veremos el método css, que según los parámetros pasados ejecuta una u otra operación:

• .css(“propiedad”): entre paréntesis pasamos el nombre de la propiedad; si está compuesta por dos palabras deberemos escribirlas en minúsculas separadas por un guión o en formato camelCase. Por ejemplo: “font-size” o “fontSize”. Nos permite extraer el valor de esa propiedad.
• .css(“propiedad”, “valor”): permite modificar una única propiedad indicada en el primer parámetro, asignándole el valor indicado en el segundo parámetro.
• .css({“propiedad1”: “valor1”, “propiedad2”: “valor2″…}: permite modificar más de una propiedad de un elemento simultáneamente.

Además, veremos cómo modificar clases CSS:

• .addClass(“nombre de la clase”): añade una clase al elemento.
• .removeClass(“nombre de la clase”): borra una clase del elemento.
• .toggleClass(“nombre de la clase”): añade una clase si no la tiene; de lo contrario, la elimina.
• .hasClass(“nombre de la clase”): devuelve true o false si el elemento tiene la clase.

Por último, mencionaremos algunos métodos propios para cambiar dimensiones CSS, como son:

• .width()
• .height()
• .innerWidth()
• .innerHeight()
• .outerWidth()
• .outerHeigth()

En el siguiente vídeo veremos cómo aplicar todo esto sobre ejemplos reales. ¡Mira cómo!