JavaScript DOM CSS

Índice

    Mostrar índice

O HTML DOM permite que o JavaScript altere o estilo dos elementos HTML.

Alterando o 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 elemento <p>:

Exemplo

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Changing the HTML style:</p>


<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>


</body>
</html>

Usando eventos

O HTML DOM permite executar código quando ocorre um evento.

Os eventos são gerados pelo navegador quando “coisas acontecem” aos elementos HTML:

  • Um elemento é clicado

  • A página foi carregada

  • Os campos de entrada são alterados

Você aprenderá mais sobre eventos no próximo capítulo deste tutorial.

Este exemplo altera o estilo do elemento HTML com id="id1", quando o 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>

Experimente você mesmo →

<!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>

Mais exemplos

Visibilidade

<!DOCTYPE html>
<html>
<body>

<p id="p1">
This is a text.
This is a text.
This is a text.
This is a text.
</p>

<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

Referência de objeto de estilo HTML DOM

Para todas as propriedades de estilo HTML DOM, veja nosso completo Referência de objeto de estilo HTML DOM.