Índice

Modificar las propiedades de estilo

La función css(), que admite parámetros, también permite modificar las propiedades de estilo de los elementos de la página.

css({propiedad de estilo})

Esta función modifica las propiedades de estilo CSS de un elemento concreto usando la notación CSS clave/valor para las propiedades de estilo a modificar.

$("p").css({ color: "red", background: "blue" });

Observe la presencia de las etiquetas habituales para las declaraciones de estilo.

Si la clave contiene un guion de unión, como por ejemplo background-color, esta se debe ubicar entre comillas ("background-color").

También se puede adoptar la notación JavaScript (CamelCase), es decir backgroundColor, en lugar de background-color.

Este método devuelve un objeto jQuery.

Desde la versión 1.6 de jQuery, podemos usar valores relativos para modificar el valor de una propiedad de estilo CSS. Esto se puede codificar con "+=" o "-=", con respecto al valor actual.

$ ("#item").css("left", "+=10px")

En este ejemplo desplazamos el elemento item 10 píxeles a la izquierda.

Ejemplo

Vamos a ilustrar este método de jQuery con un ejemplo. Al pasar el ratón por encima de un párrafo, este tomará un color de fondo y el tipo de letra se mostrará en itálica.

Tras cargar la página:

images/4_3_v41.png

Al pasar por encima del primer párrafo:

images/4_3_v42.png

El documento HTML:

doctype html> 
<html lang="es">  ...