Alteração de Estilos Dinamicamente
Agora que entendemos como adicionar e remover elementos, é hora de dar um toque especial às nossas páginas, mudando os estilos dinamicamente. Vamos aprender como fazer isso de maneira fácil e eficaz.
Alterando Cores com style
A maneira mais direta de alterar o estilo de um elemento é através da propriedade style. Vejamos um exemplo de como mudar a cor de um elemento:
// Encontrando o elemento desejado
var meuElemento = document.getElementById('meuElemento');
// Alterando a cor do fundo para vermelho
meuElemento.style.backgroundColor = 'red';
Aqui, acessamos a propriedade style do elemento e modificamos sua cor de fundo diretamente. Simples, não é?
Modificando Dimensões com style
Podemos fazer mais do que apenas mudar cores. Se quisermos ajustar as dimensões de um elemento, como largura e altura, também podemos usar style:
// Modificando a largura do elemento meuElemento.style.width = '200px'; // Modificando a altura do elemento meuElemento.style.height = '100px';
Essa abordagem nos permite ajustar o layout da página dinamicamente.
Animações com style e setTimeout
Vamos dar um toque mais interativo adicionando uma animação simples usando setTimeout:
// Adicionando uma classe para animação
meuElemento.classList.add('animacao');
// Removendo a classe após 1 segundo para a animação ocorrer
setTimeout(function() {
meuElemento.classList.remove('animacao');
}, 1000);
Aqui, adicionamos uma classe que contém uma animação e removemos essa classe após um segundo para criar um efeito animado.
Exemplo para melhorar a compreensão
Vamos aprimorar nossa compreensão da alteração dinâmica de estilos com um exemplo mais completo. Neste exemplo, teremos um botão que, quando clicado, mudará a cor de fundo de um elemento e aplicará uma animação. Vamos lá:
HTML Básico:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de Manipulação de Estilos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="meuElemento">Este é o meu elemento</div> <button onclick="mudarEstilo()">Mudar Estilo</button> <script src="script.js"></script> </body> </html>
CSS (styles.css):
#meuElemento {
width: 200px;
height: 100px;
background-color: lightblue;
transition: background-color 0.5s ease;
}
.animacao {
animation: destaque 1s ease;
}
@keyframes destaque {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
JavaScript (script.js):
function mudarEstilo() {
// Encontrando o elemento desejado
var meuElemento = document.getElementById('meuElemento');
// Alterando a cor de fundo para amarelo
meuElemento.style.backgroundColor = 'yellow';
// Adicionando a classe de animação
meuElemento.classList.add('animacao');
// Removendo a classe após 1.5 segundos para a animação ocorrer
setTimeout(function() {
meuElemento.classList.remove('animacao');
}, 1500);
}
Visualização