Método css() de jQuery

jQuery HTML/Métodos CSS

El método css() de jQuery obtiene o establece una o más propiedades de estilo de los elementos seleccionados.

Al utilizar el método css()Obteneral establecer el valor de la propiedad, se devolveráEl primer elemento seleccionadocomo valor.

Utilizar el método css()Estableceral establecer el valor de la propiedad, se estableceráTodos los elementos seleccionadosEstablecer una o más propiedades/pares de valores.

Del mismo modo, jQuery puede interpretar igualmente el formato CSS y DOM de propiedades de múltiples palabras. Por ejemplo, jQuery puede entender css("background-color" y css("backgroundColor") y devolver el valor correcto.

Sin embargo, no se admite completamente la abreviatura de propiedades CSS atajos (por ejemplo, "background", "margin" y "border") y puede producir diferentes resultados en diferentes navegadores.

Sintaxis:

Obtener el valor de la propiedad CSS:

$.css(property)

Establecer propiedades CSS y valores:

$.css(property, value)

Establecer múltiples propiedades CSS y valores:

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

Establecer propiedades CSS y valores utilizando una función

$.css(selector, function(index, currentValue))

Ejemplo

Obtener el color de fondo del DIV al hacer clic:

$("div").click(function(){
　　$.css("background-color");
});

Establecer la propiedad color de todos los párrafos:

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

Establecer múltiples propiedades CSS y valores:

$("button").click(function(){
　　$("p").css({
　　　　"color":	"white",
　　　　"font-size":	"1.3em",
　　　　"background-color":	"4285f4",
　　　　"padding":	"20px"　　
　　});
});

Obtener el ancho, la altura, el color y el color de fondo del DIV seleccionado:

$("div").click(function(){
　　let html = ["El div seleccionado tiene los siguientes estilos:"];
　　let styleProps = $(this).css(["width", "height", "color", "background-color]);
　　$.each(styleProps, function(prop, value) {
　　　　html.push(prop　+　":	"　+　value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

Configurar atributo CSS y valor usando función:

$("button").click(function(){
　　$("p").css("padding", function(i, val){
　　　　return i　+　25;
　　});
});

Al hacer clic en el botón, aumentar el relleno de todos los párrafos (usando función):

$("button").click(function(){
　　$("p").css({
　　　　padding: function(i, val){
　　　　　　return parseFloat(val)　*　1.2;
　　　　}
　　});
});

Valor del parámetro

jQuery HTML/Métodos CSS