JavaScript HTML DOM mudança CSS
HTML DOM permite JavaScript para alterar o estilo de elementos HTML.
Alterar os estilos de HTML
Para alterar o estilo de um elemento HTML, use esta sintaxe:
document.getElementById(id).style.property=新样式
O exemplo a seguir irá mudar o elemento de estilo <p>:
Exemplos
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> Este tutorial (w3big.com) </ title>
</ Head>
<Body>
<P id = "p1"> Olá mundo ! </ p>
<P id = "p2"> Olá mundo ! </ p>
<Script> document.getElementById ( "P2" ) style.color = "blue" ;. document.getElementById ( "P2") style.fontFamily = "Arial"; .. document.getElementById ( "P2") style.fontSize = "maior"; </ script>
<P> roteiro modificando os parágrafos acima. </ P>
</ Body>
</ Html>
tente »
Use Evento
HTML DOM nos permite executar código, desencadeando eventos.
Por exemplo, a eventos seguinte:
- Elemento é clicado.
- A página é carregada.
- Caixa de entrada é modificado.
- ......
Nas seções seguintes, você vai aprender mais sobre o conhecimento evento.
Este exemplo altera o id style = "id1" elemento HTML, quando o usuário clica no botão:
Exemplos
<! DOCTYPE html>
<Html>
<Body>
<H1 id = "id1"> Minha posição 1 </ h1>
<Tipo botão = "button"
onclick = "document.getElementById ( 'id1'). style.color = 'vermelho'">
Aponte-me! </ Button>
</ Body>
</ Html>
<Html>
<Body>
<H1 id = "id1"> Minha posição 1 </ h1>
<Tipo botão = "button"
onclick = "document.getElementById ( 'id1'). style.color = 'vermelho'">
Aponte-me! </ Button>
</ Body>
</ Html>
tente »
mais exemplos
visibilidade
Como fazer com que um elemento invisível. Elemento que deseja mostrar ou desaparecer?