JQuery – #05. CSS

Unidad
Materiales

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!

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!