Sviluppatori di siti Web possono accedere il quadro nascosto di una pagina Web, approfittando del Document Object Model di JavaScript o Dom. Il JavaScript metodi getElementById () e getElementsByClassName() consentono al programmatore di controllare, modificare e aggiungere informazioni sugli stili in HTML. I margini dei tag HTML, ad esempio "div" o "p" possono essere guardati o modificati accedendo a margine di proprietà di stile, marginTop, marginBottom, marginLeft e marginRight. Tag HTML deve essere etichettato con un ID prima il metodo getElementById () potete trovarli e modificarne le proprietà.

Istruzioni

1

Avviare un editor di testo normale standard, ad esempio Blocco note di Windows.

2

Immettere il seguente codice nell'editor di testo. In generale, i fogli di stile e funzione JavaScript devono essere collocati tra la testa di < >< / testa > Tag.

< html >

< head >

< style type = "text/css" ><!...

/ formattazione per l'intero documento /

esterno () {

background-color: giallo;

}

/ iniziale di formattazione per il tag div /

interno () {

Larghezza: 200px;

Altezza: 80px;

background-color: blu;

colore: bianco;

font-size: 20px;

padding: 10px;

margin-top: 0px;

margin-left: 0px;

}

--> < / stile >

<!---> funzione di script Java qui sotto

< script language = "javascript" >

Function changeMargin() () {

/ questo margine sinistro del div a 100 pixel a sinistra del bordo della finestra di browser di set /

document.getElementById("inner").style.marginLeft = "100px";

/ questo set il margine superiore del div a 300 pixel dalla parte superiore del bordo della finestra di browser /

document.getElementById("inner").style.marginTop = "300px";

/ questo codice cambia il testo che è contenuto del div a qualunque sia il programmatore vuole /

document.getElementById("inner").innerHTML = "Margine cambiata in alto sinistra e 300px 100px";

}

< / script >

< / head >

< id corpo = "esterno" >

<!-l'utente fa clic sul testo nella casella blu. In questo modo il changeMargin() di funzione da eseguire. Questo div viene assegnato l'ID "interna" necessaria da getElementById ()-->

< div id = "interna" onClick="changeMargin()" > fare clic nella casella blu per modificare i margini di sinistra e Top < / div >

< / body >

< / html >

3

Salvare il codice HTML nel file di nome "test. html."

4

Avviare Internet Explorer. Fare clic sul menu "File" e selezionare "Apri File".

5

Individuare il file "test. html." Selezionarlo con il mouse e quindi fare clic su "Apri".

6

Fare clic sul testo all'interno dello sfondo blu con il mouse per modificare i margini sinistro e superiore della finestra.

Consigli & Avvertenze

• Sia la funzione JavaScript chiama "getElementById ()" e "getElementsByName()" può accedere e modificare gli elementi DOM HTML. Il metodo getElementById () può ottenere direttamente a elementi HTML mentre "getElementsByName()" aggiunge alla complessità del programma consentendo solo l'accesso indiretto però una matrice contenente elementi di tutti i tag con etichetta. Inoltre, mentre tutti i tag HTML possono essere etichettati con un ID, non tutti possono essere etichettati con un nome.
• I principali browser Web visualizzerà CSS margini e padding in modo diverso. Anche diverse versioni dello stesso browser potrebbero produrre problemi di visualizzazione imprevisto. Sempre testare il codice su diversi browser e le versioni precedenti dello stesso browser al fine di garantire che il codice funziona come previsto.