Breve descrizione dell'utilizzo dell'attributo style per la modifica delle caratteristiche grafiche di un elemento utilizzando Javascript
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";
}
In questo esempio si vede l'effetto ottenuto.
La funzione viene richiamata all'interno di un tag button come:
<button onclick="cambia_stile('seconda_linea')">
Cambia stile
</button>dove seconda linea è l'ID del secondo paragrafo.
In questo secondo esempio invece si sono create due funzioni uguali, assegnando 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";
}