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!