JavaScript HTML DOM - Alterar CSS

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

Mudar estilo HTML

Para alterar o estilo de elementos HTML, use esta sintaxe:

document.getElementById(id).style.propriedade = new style

O exemplo a seguir altera <p> Elemento estilo:

Exemplo

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>O parágrafo acima foi alterado pelo script.</p>
</body>
</html>

Experimente você mesmo

Uso de eventos

O DOM HTML permite que você execute código quando um evento ocorrer.

Quando “algum evento” ocorre em um elemento HTML, o navegador gera um evento:

  • Quando você clicar em algum elemento
  • Quando a página é carregada
  • Quando o campo de entrada é alterado

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

Este exemplo alterará o estilo do elemento HTML com id="id1" quando o usuário clicar no botão:

Exemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Meu título 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Clique em mim!
</button>
</body>
</html>

Experimente você mesmo

Mais exemplos

Visibilidade
Como tornar um elemento invisível. Você deseja exibir o elemento?

Manual de referência do objeto Style DOM HTML

Para obter todas as propriedades de estilo DOM HTML, acesse nosso Manual de referência do objeto Style DOM HTML.