Combinando CSS e Javascript para manipular HTML

Prévia do material em texto

Combinando CSS e Javascript para manipular 
HTML 
4 maio, 2014​ ​Luiz Otávio Miranda 
Combinar CSS e Javascript com HTML é uma maneira de criar 
páginas HTML dinâmicas (DHTML), com efeitos, itens ocultos e muito 
mais. Aprenda mais sobre DHTML. 
CSS e Javascript, combinados com HTML, proporcionam um recurso extremamente poderoso 
para a criação de páginas HTML dinâmicas (​DHTML​), onde é possível alterar o layout da 
página sem que seja necessário um novo acesso ao servidor web. 
É importante lembrar que DHTML não é um termo muito recente, de fato está caindo em 
desuso. Isso acontece porque os navegadores mais novos, que suportam CSS3 e HTML5, já 
não precisam tanto do Javascript para criar efeitos na página. Porém, como ainda damos 
suporte para os navegadores antigos, e é importante que você saiba como combinar CSS e 
Javascript com o DOM HTML (​Document Object Model​) para criar efeitos para todos os 
navegadores. 
CSS e Javascript 
Para alterar o CSS de qualquer elemento de uma página HTML utilizando Javascript, você 
utiliza um dos métodos que expliquei na última aula para localizar tal elemento, sua 
propriedade ​style​ e uma propriedade CSS qualquer. 
1 
2 
3 
4 
// Localiza o elemento 
var div = document.getElementById('minha_div'); 
  
// Altera várias propriedades de CSS do elemento 
5 
6 
7 
div.style.width = '700px'; 
div.style.height = '700px'; 
div.style.background = 'red'; 
Dica: Lembre­se de colocar os trechos de código desse artigo em uma função dentro do evento 
load da página (veja​Eventos em Javascript​). 
O trecho de código acima altera a largura (​width = '700px'​), a altura (​height = '700px'​) e a cor de 
fundo (​background = 'red'​) de um elemento DIV com id "minha_div". 
As propriedades Javascript são as mesmas do CSS em nomes que têm apenas uma palavra, 
no entanto, em nomes compostos – ​background­color​, por exemplo – você deve remover o 
traço do meio e colocar a primeira letra do segundo nome em maiúsculo, veja abaixo: 
1 
2 
// Altera a propriedade CSS background­color 
div.style.backgroundColor = 'red'; 
Após a utilização de Javascript para alterar qualquer elemento da página, um atributo ​style​ é 
configurado para tal elemento, isso significa que a DIV abaixo: 
1 
<div id="minha_div"></div> 
Ficou assim no meu exemplo: 
1 
<div id="minha_div" style="width: 700px; height: 700px; background­color: 
red;"></div> 
Repare que o atributo ​style​ foi configurado com todas as opções que determinei pelo 
Javascript. 
Por outro lado, se configurar o style de qualquer elemento HTML é tão simples quanto o que 
descrevi anteriormente, capturar o estilo atual do elemento não é tão simples assim, e aqui 
novamente entramos no problema de diferença entre os navegadores. 
Temos duas opções disponíveis: ​getComputedStyle​, que funciona em TODOS (ou quase, vai 
saber) os navegadores em suas versões atuais, e ​currentStyle​, que funciona apenas em 
versões antigas do Internet Explorer e Opera. 
Por este motivo, sempre teremos que utilizar estruturas condicionais para saber se um objeto 
tem uma das duas propriedades: 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
if( 'getComputedStyle' in window ){ 
// Obtém a altura do objeto div 
var altura = window.getComputedStyle(div).height; 
} else if ( 'currentStyle' in div ) { 
// Obtém a altura do objeto div 
var altura = div.currentStyle.height; 
} else { 
// Não suporta 
alert('Navegador não suporta getComputedStyle nem currentStyle.'); 
} 
Observe que utilizei a palavra in na ​estrutura condicional ​if​, para verificar se determinada 
propriedade existe no objeto (​window​, na primeira tentativa e ​div​ na segunda). Se sim, ​true​ é 
retornado e a estrutura condicional passa; se não, retorna ​false​ e a estrutura condicional não 
executa tal ação. Por fim, utilizei o ​else​, se nenhuma das condições anteriores for verdadeira, 
ou seja, o navegador não suporta ​getComputedStyle​, nem ​currentStyle​. 
Outra diferença que você vai perceber aqui, é que as cores serão retornadas de maneiras 
diferentes em cada navegador. No meu teste, executei uma operação para recuperar a 
propriedade "backgroundColor" no Internet Explorer 6 e no Mozilla Firefox 29.0 (um muito 
antigo; outro muito recente). 
A diferença aqui é que o Internet Explorer 6 retornou "red" (vermelho) e o Mozilla Firefox 29.0 
retornou rgb(255, 0, 0) (também vermelho, mas em RGB). 
É importante que você, como um desenvolvedor Javascript, teste sua aplicação em todos os 
navegadores possíveis, pois, as diferenças não param por aí, você vai encontrar diferenças no 
seu CSS, no Javascript e até no código HTML em si. 
Brincando com HTML, CSS e Javascript 
Agora que já expliquei como você faz para alterar e obter o estilo CSS de um elemento 
utilizando Javascript, veja tudo o que eu descrevi em um único código: 
O HTML 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF­8"> 
 
<title>DOM ­ Document Object Model</title> 
 
<script src="meu_script.js"></script> 
 
<link rel="stylesheet" href="meu_css.css"> 
</head> 
  
13 
14 
15 
16 
17 
<body> 
<a href="" id="clique">Clique</a> 
<div id="minha_div"></div> 
</body> 
</html> 
O Javascript 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
// Captura o evento load da página 
window.onload=function(){ 
// Localiza o elemento 
var div = document.getElementById('minha_div'); 
  
// O link 
var clique = document.getElementById('clique'); 
  
// Captura o evento de clique no link 
clique.onclick=function(){ 
// Verifica se getComputedStyle é suportado 
if( 'getComputedStyle' in window ){ 
var largura = window.getComputedStyle(div).width; 
} else { 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
// Obtém a largura para navegadores antigos 
var largura = div.currentStyle.width; 
} 
 
// Garante que temos apenas números 
largura = parseInt(largura); 
 
// Configura mais 10 na largura 
largura += 10; 
  
// Configura aumenta o tamanho da div a cada clique 
div.style.width = largura + 'px'; 
 
// Retorna falso para não atualizar a página 
return false; 
} 
} 
Apesar de se tratar de um exemplo muito simples com captura de eventos mais antiga, a cada 
clique no link "Clique", o Javascript verifica a largura atual da DIV "minha_div" e soma mais 10 
pixels, assim, ela vai aumentando a largura de acordo com o usuário. 
Clique no link "Clique" abaixo e veja como funciona: 
Outra coisa que podemos fazer, seguindo o mesmo estilo, é mostrar ou ocultar um elemento 
utilizando a propriedade display do CSS no Javascript. 
Para isso eu utilizaria o mesmo HTML utilizado no trecho anterior, e mudaria o Javascript para: 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
// Captura o evento load da página 
window.onload=function(){ 
// Localiza o elemento 
var div = document.getElementById('minha_div'); 
// Esconde a DIV 
div.style.display = 'none'; 
 
// O link 
var clique = document.getElementById('clique'); 
  
// Captura o evento de clique no link 
clique.onclick=function(){ 
// Verifica se getComputedStyle é suportado 
if( 'getComputedStyle' in window ){ 
var display = window.getComputedStyle(div).display; 
} else { 
// Obtém a opção display para navegadores antigos 
var display = div.currentStyle.display; 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
} 
 
// Verificase display é none 
if( display == 'none' ){ 
// Muda para display block 
div.style.display = 'block'; 
} else { 
// Muda para display none 
div.style.display = 'none'; 
} 
 
// Retorna falso para não atualizar a página 
return false; 
} 
} 
Você também pode visualizar e testar este exemplo no ​Codepen ​abaixo: 
Dica: Se você não conhece o ​Codepen​, você pode clicar em "​Edit​" na caixa acima e alterar o 
código como quiser para treinar. 
Outro exemplo interessante é fazer uma espécie de efeito para que a largura do elemento seja 
alterada, por exemplo. 
Neste caso, você pode utilizar um temporizador para que a propriedade seja alterada a cada 
vez que uma função for chamada, fazendo com que a largura seja aumentada gradualmente. 
Veja abaixo a modificação no Javascript: 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
// Captura o evento load da página 
window.onload=function(){ 
// Localiza o elemento 
var div = document.getElementById('minha_div'); 
  
// O link 
var clique = document.getElementById('clique'); 
  
// Captura o evento de clique no link 
clique.onclick=function(){ 
// Verifica se getComputedStyle é suportado 
if( 'getComputedStyle' in window ){ 
var largura = window.getComputedStyle(div).width; 
} else { 
// Obtém a largura para navegadores antigos 
var largura = div.currentStyle.width; 
} 
 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
// Configura uma largura máxima 
var largura_maxima = 1000; 
 
// Cria uma função para aumentar a largura 
function aumenta_largura(){ 
// Soma 100 na largura 
largura = parseInt( largura ) + 100; 
 
// Configura a nova largura da DIV 
div.style.width = largura + 'px' 
 
// Verifica se a largura atingiu a largura máxima 
if ( largura <= largura_maxima ) { 
// Continua chamando a função até atingir 
setTimeout(aumenta_largura, 50); 
} 
}; 
 
// Chama a função pela primeira vez 
aumenta_largura(); 
 
38 
39 
40 
41 
42 
43 
// Retorna false para não atualizar a página 
return false; 
} 
} 
Claro que existem maneiras melhores para fazer o que descrevi anteriormente, no entanto, 
este é apenas um trecho de código educativo para que você entenda. 
Veja o exemplo acima em execução: 
Concluindo 
Como eu descrevi no artigo, é interessante que você faça seus próprios testes com base nos 
códigos que deixei disponíveis. Com o ​Codepen​ você também pode alterar os três trechos 
acima para suas necessidades em seus estudos. 
São apenas trechos educativos, mas vão ajudar você a entender como criar seus códigos em 
Javascript. 
Outras aulas 
Caso tenha perdido a aula anterior, segue o link: 
● O DOM e Javascript – Manipulando a página HTML 
Próxima aula: 
● Criação de objetos personalizados Javascript