Come reperire le proprietà di un tag dal CSS

Non vi è alcun dubbio che il CSS abbia reso tutto molto più dinamico e attraente, e il fatto che si possa linkare ad una pagina un foglio di stile esterno ha reso molto più snello il codice, evitando di scrivere a inizio pagina o in mezzo ai tag l’attributo style; ma avete mai provato a  usare delle funzioni javascript che richiedano valori non definiti nel file html?

Ad esempio osservate questo codice

function mostra (id) {

if (document.getElementById(id).style.display == ‘none’)

document.getElementById(id).style.display  = ‘block’;

else

document.getElementById(id).style.display  = ‘none’

}

 

questa semplicissima funzione puo’ essere associata ad un bottone o a qualsiasi altra cosa vogliate, per far si che all’evento onclick un div (per esempio), compaia e scompaia.

 

Ma se il div in questione fosse definito in questo modo:

<div onclick=”mostra(‘mydiv’)”>

avrete una stranissima sorpresa: la prima volta che richiamerete la funzione essa non funzionerà come vi aspettate. Con questo non voglio dire che la funzione sia errata; se infatti riclicchiamo sul bottone che abbiamo predisposto per chiamare la funzione questa volta, e per tutte le volte successive fino al reload della pagina, essa funzionerà più che alla perfezione. In realtà per come ho definito la funzione essa ha funzionato anche la prima volta anche se non ce ne siamo accorti prima: infatti lo script quando ha valutato la condizione dell’if ha controllato se tra gli attributi del div ci fosse il valore display none, ma ha effettuato tale controllo solo nel file html (o php) dal quale è stata richiamata la funzione, senza controllare se fosse stato definito nel css. Fallendo l’if è dunque entrato nell’else, assegnando adesso il valore none; per questo la seconda volta che chiamate la funzione funzionerà, perchè adesso si che c’è quel valore che cercate nell’if.

 

Per ovviare a questo problema possiamo usare tre metodi:

il primo è quello di scrivere tra gli attributi del tag interessato la proprietà style, ma è la soluzionE più sporca che potreste trovare

Il secondo metodo è quello di invertire semplicemente le istruzioni tra if ed else, ma è una soluzione che non può essere applicata in tutti i casi.

La terza soluzione invece è quella di usare getComputedStyle. Con questa istruzione possiamo reperire le informazioni che ci servono direttamente dal css. Facciamo un esempio con il valore display:

var mydiv= (document.getElementById(id);

var actualdisplay =window. getComputedStyle(mydiv, null).display;

if (actualdisplay == ‘none’)

document.getElementById(id).style.display == ‘block’

e così via….

 

Il parametro null all’interno di getComputedStyle può anceh essere omesso, a meno che non si tratta di elementi non regoli come ad esempio :visited; in quel caso va proprio specificato.