Interação com classes e atributos CSS no jQuery

A biblioteca jQuery fornece algumas funções para interagir com o estilo (CSS) dos elementos, permitindo obter e modificar os valores de seus diversos atributos. Veremos aqui como e quando utilizar cada uma destas funções.

Para este artigo, é necessário que o autor saiba como utilizar, ao menos basicamente, esta biblioteca. Por exemplo, é preciso saber referenciar o link do arquivo .js do jQuery no cabeçalho do documento. Logo, não entrarei em detalhes quanto a sintaxe, apenas falarei das funções em si.

Consideremos as seguintes estruturas HTML e CSS para os exemplos que seguem. Os códigos expostos podem ser executados da forma que o leitor preferir, por exemplo, no click de um botão ou ao carregar a página.

Listagem 1: Estrutura HTML para exemplos

<div id="divExterna">
	<div id="divInterna1">
		Div Interna 1
	</div>
	<div id="divInterna2">
		Div Interna 2
	</div>
	<div id="divInterna3">
		Div Interna 3
	</div>
	<div id="divInterna3">
		Div Interna 4
	</div>
	<div id="divInterna4">
		Div Interna 5
	</div>
</div>

Listagem 2: Folha de estilo para exemplos

div{border:solid 1px;}

#divExterna{
	width:510px;
	height:100px;
	padding:10px;
}

#divExterna div{
	float:left;
	width:100px;
	height:100px;
}

.divVermelha{
	background:red;
}

.divAzul{
	border-color:blue;
	border-width:5px
}

.css()

Esta função permite obter ou definir um atributo CSS do(s) elemento(s) selecionados. Para testá-la execute o código da Listagem 3.

Listagem 3: Uso da função .css

//Obtenção de valor
var divFloat = $("#divExterna div").css("float");
alert(divFloat);
//Definição de valor
$("#divInterna3").css("border-color", "yellow")

Na primeira forma, passamos o nome do atributo do qual desejamos obter o valor, já na segunda, informamos o nome do atributo e o valor que ele irá receber. Executando este trecho de código, deve ser exibida uma caixa de diálogo com o texto “left” e a terceira div interna à divExterna deve ter a cor da sua borda alterada para amarelo.

.addClass()

De nome autodescritivo, esta função é utilizada para adicionar uma classe CSS pré-definida a um ou a vários elementos. Na nossa folha de estilos, já temos duas classes prontas, “divVermelha” e divAzul”, vamos utilizá-las como argumento desta função para alterar a aparência de duas das divs internas.

Listagem 4: Uso da função .addClass

$("#divInterna1").addClass("divVermelha");
$("#divInterna4").addClass("divAzul");

Com a execução deste código, a primeira div terá a cor do plano de fundo alterada para vermelho e a quarta div terá a espessura e a cor da borda alteradas.

.removeClass()

O próprio nome também já diz muito sobre esta função que é utilizada para remover uma classe CSS de algum(ns) elemento(s).

Listagem 5: Uso da função .removeClass

$("#divInterna1").addClass("divVermelha");
$("#divInterna4").addClass("divAzul");
$("#divInterna1").removeClass("divVermelha");

A execução deste código adicionará e logo após removerá a classe “divVermelha” à primeira div interna, logo, esta permanecerá com sua aparência inicial.

.toggleClass()

A toggleClass adiciona ou remove uma classe a um elemento, dependendo da prévia existência ou não desta classe no mesmo. Resumindo, ao chamar esta função, passando o nome da classe, caso o elemento já a contenha, ela será removida, caso contrário, será adicionada.

Listagem 6: Uso da função .toggleClass

$("#divInterna2").toggleClass("divVermelha");
$("#divInterna1").toggleClass("divAzul", true);

Na primeira linha, a função será executada como explicada anteriormente. Na segunda linha, porém, temos um segundo parâmetro que indica se a classe deve ser adicionada (true) ou removida (false). Quando isto é útil? Passando o parâmetro como true, definimos que a classe deve ser apenas adicionada caso não exista, mas não removida caso já esteja presente no elemento. O contrário é válido para o parâmetro false.

.hasClass()

Esta função retorna true, caso o(s) elemento(s) selecionado(s) contenham a classe passada como parâmetro, ou false em caso negativo.

Listagem 7: Uso da função .hasClass

var temClasse = $("#divInterna2").hasClass("divAzul");
if(temClasse)
	alert("A div 2 tem a classe divAzul");
else
	alert("A div 2 NAO tem a classe divAzul");

Na Listagem 7, verificamos se a segunda div interna possui a classe divAzul, como isto não se confirma, o retorno da função hasClass será false e, portanto, a mensagem “A div 2 NAO tem a classe divAzul” será exibida.

Conclusão

As funções vistas neste artigo são de fácil utilização e entendimento, além de que conhecê-las é de fundamental importância para quem utiliza a biblioteca jQuery em seus projetos.

Os arquivos da biblioteca, bem como a documentação, pode ser encontrados no site oficial: http://jquery.com/.

Fico por aqui com este artigo, esperando que o conteúdo possa ser útil para os leitores.

Um abraço e até a próxima!