O DOM HTML permite JavaScript para alterar o estilo de elementos HTML.
Alterar Estilo HTML
Para alterar o estilo de um elemento HTML, use esta sintaxe:
document.getElementById(id).style.property=new style
O exemplo a seguir altera o estilo de um <p> elemento:
Exemplo
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Tente você mesmo " usando Events
O DOM HTML permite que você execute código quando ocorre um evento.
Os eventos são gerados pelo navegador quando "as coisas acontecem" a elementos HTML:
- Um elemento é clicado
- A página foi carregada
- Os campos de entrada são alteradas
Você vai aprender mais sobre eventos no próximo capítulo deste tutorial.
Este exemplo altera o estilo do elemento HTML com id="id1" , quando o usuário clica em um botão:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html> Tente você mesmo " mais Exemplos
Visibilidade Como fazer um elemento invisível. Você quer mostrar o elemento ou não?
HTML DOM Estilo Object Reference
Para todas as propriedades de estilo HTML DOM, vá para a completa Object Reference HTML DOM Estilo .
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »