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.

Vídeo 02 - Slide Down

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>

​x
 
<!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>
​
    <body>
        <script type="text/javascript">
​
           $(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>
​
        <div id="d1" style="background-color: black; text-align: center;">
           <img src="logo_imd.png">
        </div>
​
        <br>
​
        <div id="d2">
           Altura: <input id="t1" type="text">
           <br>
           Largura: <input id="t2" type="text">
        </div>
​
        <br>
​
        <div style="text-align: center;">
           <input type="button"
             value="Recuperar Valor" onclick="recuperarValor()">
           <input
             type="button" value="Definir Valor" onclick="definirValor()">
        </div>
​
    </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.

Figura 01 - Exemplo de uso de métodos CSS