Material Didático

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

Aula 08 - jQuery (Parte 2)

Métodos – CSS

Na tabela a seguir, você pode conferir os principais métodos disponibilizados pela API do jQuery para recuperar ou definir propriedades CSS dos elementos HTML.

Método	Descrição
$(seletor).css(nome, valor)	Define o valor da propriedade informada nos elementos selecionados.
$(seletor).css({propriedades})	Define o valor das propriedades informadas nos elementos selecionados.
$(seletor).css(nome)	Recupera o valor da propriedade informada no elemento selecionado.

Tabela 1 - Principais métodos utilizados para recuperar e definir propriedades CSS.

Veja um exemplo de uso dos métodos apresentados:

Utilize o arquivo logo_imd.png disponível aqui e o adicione no seu projeto. Lembre de colocar o arquivo de imagem na pasta WebContent assim como o HTML do exemplo abaixo.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>jQuery - CSS</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
	</head>

$(document).ready(function(){
		     $("#d2").css({"border-width":"2px", "border-style":"dotted",
		       "border-color":"red", "text-align":"center"});
		   });
		   
		   function recuperarValor() {

var altura = $("#d1").css("height");
		     $("#t1").val(altura);

var largura = $("#d1").css("width");
		     $("#t2").val(largura);

}

function definirValor() {

var altura = $("#t1").val();
		     $("#d1").css("height", altura);

var largura = $("#t2").val();
		     $("#d1").css("width", largura);

}
		</script>

<br>

<div id="d2">
		   Altura: <input id="t1" type="text">
		   <br>
		   Largura: <input id="t2" type="text">
		</div>

<br>

</body>
</html>

Notas sobre o código apresentado:

Nas linhas 12 e 13, após a página ser completamente carregada, utilizamos o método 'css' que recebe um array de propriedades utilizadas para definir uma borda vermelha pontilhada no elemento 'd2'.
Na função 'recuperarValor' (linhas 16 a 24), utilizamos o método 'css' informando o nome da propriedade CSS que desejamos saber o valor, em seguida usamos esse valor para atualizamos os campos de texto 't1' e 't2'.
Na função 'definirValor' (linhas 26 a 34), utilizamos o método 'css' da API do jQuery informando o nome e o valor da propriedade que desejamos definir ou atualizar (recuperados dos campos texto 't1' e 't2').

Após a execução desse código, a página apresentada na Figura 1 é exibida.

Termo de uso

arrow_back Aula 08 - jQuery (Parte 2)

Métodos – CSS

Notas sobre o código apresentado:

Aula 08 - jQuery (Parte 2)