Modificare gli stili di un elemento

Un effetto molto carino, e spesso anche utile, consiste nel modificare
lo stile di un determinato elemento tramite Javascript. Questo può
servire ad esempio per evidenziare l’elemento in questione.

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:

<button onclick="cambia_stile('seconda_linea')">
Cambia stile
</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:

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

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 

Popularity: 2% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback