Opérations CSS jQuery - méthode css()

Ejemplo

Définir la couleur de l'élément <p> :

$(".btn1").click(function(){
  $("p").css("color","red");
);

Prueba por ti mismo

Définition et utilisation

La méthode css() retourne ou définit une ou plusieurs propriétés de style des éléments correspondants.

Retourne la valeur de la propriété CSS

Retourne la valeur de la propriété CSS du premier élément correspondant.

Remarque :Lorsqu'il est utilisé pour retourner une valeur, les propriétés CSS abrégées ne sont pas prises en charge (par exemple, "background" et "border").

$(selector).css(name)
Parámetros Descripción
name Obligatoire. Définir le nom de la propriété CSS. Ce paramètre peut inclure n'importe quelle propriété CSS. Par exemple, "color".

Ejemplo

Obtenir la valeur de la propriété de style color du premier paragraphe :

$("p").css("color");

Prueba por ti mismo

Définir les propriétés CSS

Establece la propiedad CSS especificada de todos los elementos coincidentes.

$(selector).css(name,value)
Parámetros Descripción
name Obligatorio. Define el nombre de la propiedad CSS. Este parámetro puede contener cualquier propiedad CSS, como "color".
value

Opcional. Define el valor de la propiedad CSS. Este parámetro puede contener cualquier valor de propiedad CSS, como "red".

Si se establece un valor de cadena vacía, se elimina la propiedad especificada del elemento.

Ejemplo

Establecer el color de todos los párrafos en rojo:

$("p").css("color","red");

Prueba por ti mismo

Usar una función para establecer la propiedad CSS

Establece el valor de la propiedad de estilo de todos los elementos coincidentes.

Esta función devuelve el valor de la propiedad que se debe establecer. Acepta dos parámetros, index es la posición del elemento en la colección del objeto, value es el valor de la propiedad anterior.

$(selector).css(name,function(index,value))
Parámetros Descripción
name Obligatorio. Define el nombre de la propiedad CSS. Este parámetro puede contener cualquier propiedad CSS, como "color".
function(index,value)

Define la función que regresa el nuevo valor de la propiedad CSS.

  • index - Opcional. Acepta la posición del selector.
  • oldvalue - Opcional. Acepta el valor actual de la propiedad CSS.

Ejemplo 1

Establecer el color de todos los párrafos en rojo:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    );

Prueba por ti mismo

Ejemplo 2

Aumentar gradualmente el ancho del div:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
);

Prueba por ti mismo

Establecer múltiples pares de propiedades/valores de CSS

$(selector).css({property:value, property:value, ...})

Establece el objeto "nombre/valor" como propiedad de estilo de todos los elementos coincidentes.

Esta es la mejor manera de establecer una gran cantidad de propiedades de estilo en todos los elementos coincidentes.

Parámetros Descripción
{property:value}

Obligatorio. Define el objeto "nombre/valor" que se debe establecer como propiedad de estilo.

Este parámetro puede contener varios pares de nombres de propiedades/valores de CSS. Por ejemplo {"color":"red","font-weight":"bold"}

Ejemplo

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  );

Prueba por ti mismo