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 (w3big.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"; .. 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.
- ......
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>
<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?