A biblioteca jQuery nos permite manipular o DOM com bastante facilidade através de seus seletores alinhados com os seletores CSS, inclusive CSS3. Com isso podemos manipular elementos HTML de forma simples e prática, fugindo um pouco das funções padrão da linguagem JavaScript.
Porém, muitas vezes precisamos não só acessar os elementos HTML, mas também o estilo aplicado a esses elementos (CSS). Como era de se esperar, a jQuery também nos oferece uma função tanto para obter quanto para definir os atributos CSS de um elemento. Esta função é a css() e pode ser chamada de duas formas:
- $(elemento).css(“atributo”): retorna o valor do atributo CSS passado como parâmetro.
- $(elemento).css(“atributo”, “valor”): atribui o valor passado como segundo parâmetro ao atributo CSS informado no primeiro.
Utilizando a função jQuery CSS
Por exemplo, se tivermos um elemento chamado “div1” e quisermos saber como está definida a cor do seu background, podemos proceder da seguinte forma (Listagem 1):
Listagem 1: Obtendo valor de atributo CSS
var cor = $("#div1").css("background-color");Desta forma a função retorna um único valor de acordo com o atributo selecionado. Mas caso seja necessário, também é possível obter o valor de vários atributos ao mesmo tempo. Dessa vez a função retorna um array com os valores na ordem em que foram solicitados (Listagem 2).
Listagem 2: Obtendo o valor de vários atributos
var atributos = $("#div1").css(["background-color", "color", "margin-top"]);Agora temos um vetor sobre o qual podemos realizer um loop e acessar todos os elementos, por exemplo.
De forma semelhante, caso desejemos definir o valor de um atributo, basta informar este valor como segundo parâmetro, como mostra a Listagem 3.
Listagem 3: Definindo o valor de um atributo
$("#div1").css("width", "100px");
$("#div1").css("background-color", "red");A atribuição dos valores segue as mesmas regras que utilizamos diretamente no código CSS. Por exemplo, os valores válidos para o atributo background-color são apenas cores.
Bem, esta foi a dica de hoje. Caso surja alguma dúvida, é só utilizar a seção de comentários logo abaixo.
Até a próxima.
