Opérations CSS jQuery - méthode css()
Ejemplo
Définir la couleur de l'élément <p> :
$(".btn1").click(function(){ $("p").css("color","red"); );
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");
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");
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.
|
Ejemplo 1
Establecer el color de todos los párrafos en rojo:
$("button").click(function(){ $("p").css("color",function(){return "red";}); );
Ejemplo 2
Aumentar gradualmente el ancho del div:
$("div").click(function() { $("this").css( "width", function(index, value) {return parseFloat(value) * 1.2;} ); );
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" );