Operações CSS do jQuery - método css()

Manual de Referência de Operação CSS do jQuery

Exemplo

Definir a cor do elemento <p>:

$(".btn1").click(function(){
  $("p").css("cor","vermelho");
});

Experimente pessoalmente

Definição e uso

O método css() retorna ou define uma ou mais propriedades de estilo dos elementos correspondentes.

Retorna o valor da propriedade CSS

Retorna o valor da propriedade CSS do primeiro elemento correspondente.

Nota:Quando usado para retornar um valor, não suporta propriedades CSS abreviadas (como "background" e "border").

$(selector).css(name)
Parâmetros Descrição
name Obrigatório. Especifica o nome da propriedade CSS. Este parâmetro pode conter qualquer propriedade CSS. Por exemplo, "cor".

Exemplo

Obter o valor da propriedade de estilo color do primeiro parágrafo:

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

Experimente pessoalmente

Definir propriedades CSS

Define o atributo CSS específico de todos os elementos correspondentes.

$(selector).css(name,value)
Parâmetros Descrição
name Obrigatório. Define o nome do atributo CSS. Este parâmetro pode conter qualquer atributo CSS, como "color".
value

Opcional. Define o valor do atributo CSS. Este parâmetro pode conter qualquer valor de atributo CSS, como "red".

Se definido um valor vazio, remove o atributo especificado do elemento.

Exemplo

Definir a cor de todos os parágrafos como vermelha:

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

Experimente pessoalmente

Usar função para definir atributo CSS

Define o valor da propriedade de estilo de todos os elementos correspondentes.

Esta função retorna o valor do atributo a ser definido. Aceita dois parâmetros, index é a posição do elemento na coleção do objeto, value é o valor do atributo original.

$(selector).css(name,function(index,value))
Parâmetros Descrição
name Obrigatório. Define o nome do atributo CSS. Este parâmetro pode conter qualquer atributo CSS, como "color".
function(index,value)

Define a função que retorna o novo valor do atributo CSS.

  • index - Opcional. Aceita a posição do seletor index.
  • oldvalue - Opcional. Aceita o valor atual do atributo CSS.

Exemplo 1

Definir a cor de todos os parágrafos como vermelha:

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

Experimente pessoalmente

Exemplo 2

Aumentar gradualmente a largura do div:

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

Experimente pessoalmente

Definir múltiplos pares de atributos CSS/valores

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

Defina o objeto "nome/valor" como propriedades de estilo de todos os elementos correspondentes.

Esta é a melhor maneira de definir várias propriedades de estilo em todos os elementos correspondentes.

Parâmetros Descrição
{property:value}

Obrigatório. Define o objeto "nome/valor" para o atributo de estilo a ser configurado.

Este parâmetro pode conter várias pares de nomes de propriedades CSS/valores. Por exemplo {"color":"red","font-weight":"bold"}

Exemplo

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

Experimente pessoalmente

Manual de Referência de Operação CSS do jQuery