PROGRAMMIAMO
JS - Stili e innerHTML
Modificare gli stili di un elemento

Oltre a consentire di accedere agli attributi di un elemento, l'istruzione document.getElementById('nomeoggetto') permette anche di accedere agli stili CSS dell'elemento stesso. La sintassi è la seguente:

document.getElementById("nomeoggetto").style.nomestile

per esempio:

document.getElementById("titolo_pagina").style.color = "red";

fa diventare rosso il colore del testo dell'elemento di nome (id) titolo_pagina.

La sintassi non presenta particolari difficoltà. Si osservi il seguente ulteriore esempio che allinea al centro il testo di un paragrafo:

document.getElementById("paragrafo").style.textAlign = "center";

L'unico piccolo problema è che i nomi degli stili utilizzati dalla document.getElementById non coincidono sempre con i nomi usati negli stili CSS. Per esempio lo stile per allineare al centro il contenuto di un paragrafo si chiama text-align (col trattino in mezzo), come in

<p style="text-align:right"> Testo allineato a destra </p>

Invece il nome usato dalla document.getElementById  è textAlign (senza trattino e con la maiuscola iniziale in mezzo al nome).

Vi sono molti casi simili che possono creare qualche problema al programmatore distratto. Per esempio lo stile per il colore di sfondo si chiama background-color come in:

<p style="background-color:black;" id="testo"> Testo su sfondo nero </p>

mentre usando la document.getElementById bisogna scrivere:

document.getElementById("testo").style.backgroundColor = "black";

Il lettore può trovare su W3school un utile elenco di tutti i nomi di stile che possono essere utilizzati con relativi esempi.

 

Accedere al contenuto di un elemento contenitore: innerHTML

Il JS permette anche di accedere e di modificare il contenuto di un elemento contenitore (per esempio un paragrafo). Consideriamo l'esempio seguente:

<p id="myP" onclick="cambia()">Sono un paragrafo. Cliccami sopra!</p>

e la seguente funzione JS di nome cambia:

function myFunction()
{
document.getElementById("myP").innerHTML = "Sorpresa! Il testo del paragrafo è cambiato!";
}

Facendo click sul paragrafo il suo contenuto (il testo visualizzato) cambia. L'utente può provare da sé il funzionamento facendo click col mouse sulla scritta qui sotto:

Sono un paragrafo. Cliccami sopra!

La sintassi generale per accedere al contenuto di un qualsiasi elemento contenitore è la seguente:

document.getElementById("nome_elemento").innerHTML

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it