JavaScript HTML DOM cambio CSS

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


Cambiar los estilos HTML

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

document.getElementById(id).style.property=新样式

El siguiente ejemplo se va a cambiar el elemento de estilo <p>:

Ejemplos

<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Este tutorial (w3write.com) </ title> </ Head> <Cuerpo> <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"; es document.getElementById ( "P2") = style.fontSize "grande"; </ script> <P> secuencia de comandos mediante la modificación de los párrafos anteriores. </ P> </ Body> </ Html>

Trate »

uso de eventos

HTML DOM nos permite ejecutar código mediante la activación de eventos.

Por ejemplo, los eventos siguientes:

  • Elemento que se hace clic.
  • La página se cargará.
  • Campo de entrada se modifica.
  • eseses

En las siguientes secciones, usted aprenderá más sobre el conocimiento evento.

En este ejemplo se cambia la identificación del estilo = "ID1" elemento HTML, cuando el usuario hace clic en el botón:

Ejemplos

<! DOCTYPE html>
<Html>
<Cuerpo>

<H1 id = "id1"> Mi partida 1 </ h1>
<Tipo botón = "botón"
onclick = "document.getElementById ( 'id1'). style.color =" rojo "">
me punto! </ Button>

</ Body>
</ Html>

Trate »


más ejemplos

visibilidad
Cómo hacer que un elemento invisible. Elemento que desea mostrar o desaparecer?