Método css() do jQuery

HTML do jQuery/Métodos CSS

O método css() do jQuery obtém ou define um ou mais atributos de estilo do elemento selecionado.

ao usar o método css()Obterao definir o valor da propriedade, ele retornaráo primeiro elemento selecionadovalor.

usando o método css()Definirao definir o valor da propriedade, eleTodos os elementos selecionadosDefinir uma ou mais propriedades/par. valor.

Da mesma forma, o jQuery pode interpretar igualmente formatos CSS e DOM de atributos de múltiplas palavras. Por exemplo, o jQuery pode entender css("background-color" e css("backgroundColor") e retornar o valor correto.

No entanto, não há suporte completo para abreviações de propriedades CSS (por exemplo, "background", "margin" e "border") e podem gerar resultados diferentes em diferentes navegadores.

Sintaxe:

Obter valor de propriedade CSS:

$.css(property)

Definir propriedades CSS e valores:

$.css(property, value)

Definir várias propriedades CSS e valores:

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

Definir propriedades CSS e valores usando função

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

Exemplo

Obter a cor de fundo do DIV clicado:

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

Definir a propriedade color de todos os parágrafos:

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

Definir várias propriedades CSS e valores:

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

Obter a largura, altura, cor e cor de fundo do DIV clicado:

$("div").click(function(){
　　let html = ["O div clicado possui os seguintes estilos:"];
　　let styleProps = $(this).css(["width", "height", "color", "background-color]);
　　$.each(styleProps, function(prop, value) {
　　　　html.push(prop　+　": 	"　+　value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

Definir propriedade CSS e valor usando função:

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

Ao clicar no botão, aumentar o preenchimento de todos os parágrafos (usando função):

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

Valor do Parâmetro

HTML do jQuery/Métodos CSS