Come scrivere un Div da JavaScript / Myclads.com

Come scrivere un Div da JavaScript

September 8

Il linguaggio Javascript permette agli sviluppatori di siti web di ispezionare e modificare il quadro nascosta di una pagina Web. JavaScript dispone di metodi per accedere al Document Object Model o DOM - Application Programming Interface di Hypertext Markup Language. Il metodo JavaScript getElementById () permette al programmatore di controllare, modificare e aggiungere i tag HTML e informazioni styling. La maggior parte delle proprietà dei fogli di stile e gli attributi possono essere modificati, tra cui sfondi, font, bordi, larghezze e posizionamento. I tag HTML devono essere etichettati con un ID in modo che il metodo di getElementById () può trovare e accedervi.

istruzione

1 Avviare il, testo semplice editor di testo standard del computer.

2 Inserire il codice seguente nel editor di testo:

<Html>

<Head>

<Style type = "text / css"> <! -

esterno {

background-color: yellow;

}

interno {

width: 200px;

Altezza: 40px;

background-color: red;

colore bianco;

font-size: 15px;

padding: 10px;

}

-> </ Style>

funzione changeDiv () {

document.getElementById ( "interna") style.width = "400px.";

. Document.getElementById ( "interna") style.height = "400px";

. Document.getElementById ( "interna") style.fontSize = "62px";

. Document.getElementById ( "interna") style.textAlign = "center";

. Document.getElementById ( "interna") style.backgroundColor = "# FFB3B3";

. Document.getElementById ( "interna") style.color = "nero";

document.getElementById ( "interna") innerHTML = "JavaScript può cambiare molte proprietà di un Div.";

}

</ Script>

</ Head>

<Div id = "interno" onclick = "changeDiv ()"> Fare clic nella casella rossa per cambiare il div </ div>

</ Body>

</ Html>

3 Fare clic su "File", "Salva". Salvare sotto il nome del file "test.html."

4 Avviare il browser. Fare clic su "File", "Apri file".

5 Individuare il file "test.html" si è creato. Fai clic su "Apri".

6 Fare clic sul testo all'interno del fondo blu con il mouse per cambiare i margini del box.

Consigli e avvertenze

Il metodo JavaScript DOM "getElementsByTagName ()" permette ai programmatori di modificare tutte le istanze di un particolare tag HTML in un documento in una sola volta. Il metodo "getElementsByTagName ()" viene dato il nome di un tag HTML come parametro - come la "p" per paragrafo, "H1" per un colpo di testa 1, o "div" per una divisione pagina - e restituisce un array che contiene ogni occorrenza di quel tag nel documento. Ad esempio, se un documento contiene cinque paragrafi con tag "<p>", getElementsByTagName ( "p") restituisce un array con cinque elementi. Il codice seguente illustra questo cambiando il colore del testo di tutti gli elementi "<p>" o di paragrafo nella pagina Web:
<Html>
<Head>
<Script language = "javascript">
changePs function () {
var x = document.getElementsByTagName ( "p");
for (i = -0; i <x.length; i ++)
x [i] .style.color = '# D2691E';
}
</ Script>
</ Head>
<Body>
<P style = "color: red"> Eccomi </ p>
<P style = "color: blue"> Eccomi </ p>
<P style = "color: green"> Eccomi </ p>
<P style = "color: yellow"> Eccomi </ p>
<P style = "color: grey"> Eccomi </ p>
<P style = "color: black"> Eccomi </ p>
<input type = "button" onclick = "changePs ()">
</ Body>
</ Html>
La maggior parte dei browser visualizzano valido codice HTML e CSS in modo diverso. Anche le diverse versioni dello stesso browser possono produrre problemi di visualizzazione imprevisti. Verificare sempre il codice su diversi browser e le versioni precedenti dello stesso browser per garantire le opere di codice come previsto.