JavaScript HTML DOM - Изменение CSS

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

Cambiar estilo HTML

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

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

El siguiente ejemplo cambia: <p> Elemento de estilo:

Ejemplo

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>El párrafo superior ha sido modificado por el script.</p>
</body>
</html>

Pruebe usted mismo

Uso de eventos

HTML DOM le permite ejecutar código cuando ocurren eventos.

Cuando 'algunas cosas' ocurren en un elemento HTML, el navegador genera eventos:

  • Al hacer clic en algún elemento
  • Al cargar la página
  • Cuando se cambia un campo de entrada

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

Este ejemplo cambiará el estilo del elemento HTML con id="id1" cuando el usuario haga clic en el botón:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Mi título 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
¡Haga clic en mí!
</button>
</body>
</html>

Pruebe usted mismo

Más ejemplos

Visibilidad
¿Cómo hacer que un elemento sea invisible? ¿Desea mostrar el elemento?

Manual de referencia del objeto Style del DOM HTML

Para obtener todos los atributos de estilo del DOM HTML, por favor visite nuestra Manual de referencia del objeto Style del DOM HTML.