Método css
O método css permite obter
e alterar os estilos CSS de um elemento.
É importante lembrar que obteremos os 'valores
computados' das propriedades (computed style
properties), que podem ser diferentes dos
especificados nos estilos css.
Sintaxe
Obter uma propriedade:
$(seletor).css(propriedade);
Obter várias propriedades, o parâmetro passado é um array de nomes de propriedades:
$(seletor).css(['width', 'height', 'color']);
Alterar uma propriedade:
$(seletor).css(propriedade, novo valor);
Altere várias propriedades, passando-as como um objeto
contendo pares 'chave: valor'. O nome da propriedade
é especificado no formato CamelCase:
$(seletor).css({fontSize: '12px', color: 'red'});
Ou, uma alternativa:
<p class="www">texto</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Também podemos aplicar uma determinada função a cada
elemento no conjunto. Neste caso, o primeiro parâmetro da função
receberá o índice do elemento no conjunto, e o segundo parâmetro
- o valor atual da propriedade css especificada
para o elemento específico. Neste caso, this
dentro da função apontará para o elemento atual.
A propriedade CSS de cada elemento mudará para o valor
que a função retornar para aquele elemento específico:
$(seletor).css(nome da propriedade, function(índice no conjunto, valor atual da propriedade css));
Exemplo
Vamos obter todos os elementos com a classe www
e mudar sua cor para vermelho:
<p class="www">texto</p>
$('.www').css('color', 'red');
Exemplo
Vamos obter todos os elementos com a classe www
e mudar sua cor para vermelho e o tamanho da fonte
- para 20px:
<p class="www">texto</p>
$('.www').css({color:'red', fontSize:'20px'});
Ou, uma alternativa:
<p class="www">texto</p>
$('.www').css({'color':'red', 'font-size':'20px'});
