Nenhum produto encontrado nessa seleção.
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.
// Localiza o elemento
var div = document.getElementById('minha_div');
// Altera várias propriedades de CSS do elemento
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:
// 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:
<div id="minha_div"></div>
Ficou assim no meu exemplo:
<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:
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
<!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> <body> <a href="" id="clique">Clique</a> <div id="minha_div"></div> </body> </html>
O Javascript
// 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;
}
// 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:
See the Pen Exemplo de CSS, Javascript e HTML by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.
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:
// 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;
}
// Verifica se 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:
See the Pen Show and hide element by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.
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:
// 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;
}
// 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();
// 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:
See the Pen Set the width using setTimeout by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.
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:
Próxima aula:
Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:
