JavaScriptDOMCSS

Tabla de contenido

    Mostrar tabla de contenidos

HTML DOM permite que JavaScript cambie el estilo de los elementos HTML.

Cambiar el estilo HTML

Para cambiar el estilo de un elemento HTML, utilice esta sintaxis:

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

El siguiente ejemplo cambia el estilo de un elemento <p>:

Ejemplo

<html>
<body>

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

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

</body>
</html>

Pruébelo usted mismo →

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

El DOM HTML le permite ejecutar código cuando ocurre un evento.

El navegador genera eventos cuando "suceden cosas" con los elementos HTML:

  • Se hace clic en un elemento

  • La pagina se ha cargado

  • Los campos de entrada se cambian

Aprenderá más sobre eventos en el próximo capítulo de este tutorial.

Este ejemplo cambia el estilo del elemento HTML con id="id1", cuando el El usuario hace clic en un botón:

Ejemplo

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

Pruébelo usted mismo →

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

Más ejemplos

Visibilidad

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

Referencia de objetos de estilo HTML DOM

Para todas las propiedades de estilo HTML DOM, consulte nuestro completo Referencia de objetos de estilo HTML DOM.