Operaciones CSS de jQuery - método css()

Manual de Referencia de Operaciones CSS de jQuery

Ejemplo

Establecer el color del elemento <p>:

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

Prueba por ti mismo

Definición y uso

El método css() devuelve o establece una o más propiedades de estilo de los elementos coincidentes.

Devuelve el valor de la propiedad CSS

Devuelve el valor de la propiedad CSS del primer elemento coincidente.

Nota:No se admite la propiedad CSS abreviada cuando se utiliza para devolver un valor (por ejemplo, "background" y "border").

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

Ejemplo

Obtener el valor de la propiedad de estilo color del primer párrafo:

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

Prueba por ti mismo

Establecer propiedades CSS

Establece la propiedad CSS específica 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 en todos los elementos coincidentes.

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

$(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" de los atributos de estilo en 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" de la propiedad de estilo que se va a establecer.

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

Manual de Referencia de Operaciones CSS de jQuery