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!