In questo articolo si vedrà in particolare come modificare lo stile di un elemento, quindi quel genere di informazioni che vengono assegnate tramite i fogli di stile (CSS)

La sintassi è estremamente semplice: 

function cambia_stile( id_elemento ) {
var elemento = document.getElementById(id_elemento)
elemento.style.background = "#def";
}

La funzione può essere richiamata all'interno dei tag, come ad esempio un tag button:

dove seconda linea è l'ID del secondo paragrafo.

In questo secondo esempio invece sono state create due funzioni uguali, assegnandgli due diversi colori di sfondo:

queste funzioni vengono assegnate ad ogni p nel modo seguente:

<p id="p1" onmouseover="evidenzia('p1');" onmouseout="togli_evidenzia('p1');">...</p>

L'effetto ottenuto in questo caso è quelo di evidenziare i paragrafi al passaggio del mouse sopra ognuno di essi, e togliere il colore di sfondo quando il mouse esce dall'area del paragrafo.

È chiaramente possibile modificare anche gli altri attributi dell'elemento, come il colore del testo, i bordi, l'allineamento...

function cambia_stile( id_elemento ) {
var elemento = document.getElementById(id_elemento)
elemento.style.background = "#def";
elemento.style.color = "#09f";
elemento.style.border = "1px solid #09f";
elemento.style.textAlign = "center";
}

A cura di: Pugia.com