JavaScript HTML DOM - Cambio de CSS
El HTML DOM permite que JavaScript cambie el estilo de los elementos HTML.
Cambio de estilo HTML
Para cambiar el estilo de un elemento HTML, use esta sintaxis:
document.getElementById(id).style.property = new style
El siguiente ejemplo cambia el estilo de un <p>elemento:
Ejemplo
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Uso de eventos
El HTML DOM le permite ejecutar código cuando ocurre un evento.
Los eventos son generados por el navegador cuando "le suceden cosas" a los elementos HTML:
- Se hace clic en un elemento
- La página ha cargado
- Los campos de entrada se cambian
Aprenderá más acerca de los eventos en el próximo capítulo de este tutorial.
Este ejemplo 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>
Más ejemplos
Cómo hacer invisible un elemento. ¿Quieres mostrar el elemento o no?
Referencia de objetos de estilo HTML DOM
Para conocer todas las propiedades de estilo HTML DOM, consulte nuestra referencia completa de objetos de estilo HTML DOM .