Los últimos tutoriales de desarrollo web
 

JavaScript DOM HTML - CSS Cambio


El DOM HTML permite JavaScript para cambiar el estilo de los elementos HTML.


Cambiar el estilo de HTML

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

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

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

Ejemplo

<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>
Inténtalo tú mismo "

El uso de Events

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

Los eventos se generan por el navegador cuando "pasan cosas" para los elementos HTML:

  • Un elemento se hace clic en
  • La página se ha cargado
  • Los campos de entrada se cambian

Va a aprender más acerca de los eventos en el siguiente capítulo de este tutorial.

En este ejemplo se cambia el estilo del elemento HTML con id="id1" , cuando 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>
Inténtalo tú mismo "

Más ejemplos

Visibilidad Cómo hacer que un elemento invisible. ¿Quieres mostrar el elemento o no?


DOM Estilo HTML referencia de objeto

Para todas las propiedades de estilo HTML DOM, visita nuestra completa referencia de objeto DOM Estilo HTML .


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »