Il Document Object Model o DOM consente di accedere agli elementi di una pagina Web. Il DOM permette di aggiungere o modificare sfondi, margini, colori, tipi di carattere, caratteri, bordi e larghezze. La funzione JavaScript getElementById () consente di modificare un elemento HTML o HypertText Markup Language, se tale elemento è identificato con un ID univoco. Se un elemento di stile come colore del carattere di un paragrafo è già impostato, è possibile ignorare l'attributo senza ricaricare la pagina Web impostando l'attributo di stile color su una stringa vuota.

Istruzioni

1

Lanciare l'editor di testo blocco note facendo clic sul pulsante "Start", cliccando su "Tutti i programmi", "Accessori" e quindi fare clic su blocco note.

2

Tipo nel blocco note:

< html >

< head >

< style type = "text/css" >

p {

tipo di carattere-peso: normale;

font-style: normal;

font-size: 12px;

border: 2px punteggiato blu;

Larghezza: 50%;

}

< / stile >

< script language = "javascript" >

Function changeStyle() () {

tutti gli attributi impostata e stringa vuota ""

document.getElementById("container").style.backgroundColor = "";

document.getElementById("title").style.color = "";

document.getElementById("title").style.backgroundColor = "";

document.getElementById("textbox").style.padding = "";

document.getElementById("textbox").style.backgroundColor = "";

document.getElementById("textbox").style.color = "";

document.getElementById("paragraph").style.fontSize = "";

document.getElementById("paragraph").style.color = "";

document.getElementById("paragraph").style.width = "";

document.getElementById("mybutton").innerHTML = "Funziona!";

}

< / script >

< / head >

< id corpo = "contenitore" style = "background-color: #F5BFBF" >

< id h1 = "title" style = "color: #00F; background: #c1c1c1" > Moby Dick < / h1 >

< div id = "textbox" style = "color: red; background-color: black; padding: 10px; border: 2px solid #f00; ">

< id p = "paragrafo" style = "font-dimensioni: 28px; Larghezza: 400px; colore: verde" >

Non chiamarmi Al. La mia memoria e la mia borsa si sono ridotti nel corso degli anni come mai ho adattato alla vita sulla terra. </p >

< / div >

< id pulsante = "mybutton" type = "button" onClick="javascript:changeStyle()" > Clicca qui per cancellare alcuni attributi di stile < / button >

< / body >

< / html >

3

Fare clic sul menu File. Selezionare l'opzione "Salva". Salvare sotto il nome di file "test."

4

Avviare il browser Web. Fare clic sulla voce di menu "File" e selezionare "Apri File".

5

Individuare il file "test. html" appena creato, selezionarlo con il mouse, quindi fare clic su "Apri".

6

Fare clic sul pulsante "Clicca qui per cancellare alcuni attributi di stile." I colori e le dimensioni di carattere predefinito per le impostazioni del foglio di stile nella sezione < head > del codice HTML.

Consigli & Avvertenze

• È possibile evitare molti errori di programmazione JavaScript inserendo note in tutto il codice. Per aiutarvi commenti e altri che possono utilizzare il codice capire la logica dietro lo script. Aggiunta di spazi vuoti tra i distinti blocchi di codice quali cicli, istruzioni condizionali, funzioni e dichiarazioni di variabili rendono più semplice seguire il flusso di esecuzione dello script. Infine, utilizzando breve ma descrittivo variabile e nomi di funzioni possono rendere la scrittura quasi facile come scrivere nello pseudo-codice Javascript.
• Mentre più moderni browser fare uno sforzo per essere conformi a HTML, JavaScript/ECMAScript e foglio di stile CSS standard, le versioni precedenti di alcuni browser proprietario non possono visualizzare correttamente pagine Web progettate utilizzando le ultime tecniche. Testare le pagine Web su come molti diversi browser su dispositivi diversi come molti come possibile per assicurarsi che viene visualizzato l'il maggior numero di persone si visualizza la pagina nel modo desiderato.