I Fogli di stile con JavaScript

Link copiato negli appunti

Sin dalla loro prima comparsa sulla scena del Web i fogli di stile CSS, o meglio le documentazioni online che ne illustrano l'utilizzo e le funzionalità, ci hanno abituato ad una loro definizione che inneggia alla loro maggiore praticità, potenza, versatilità e dinamicità nei confronti del buon vecchio HTML.

Tutto vero: sono di certo più pratici per merito della loro semplicità sintattica e del loro utilizzo all'interno ed all'esterno di un documento HTML, sono molto più potenti per il semplice fatto che effetti stilistici ottenibili col loro utilizzo sono altrimenti inottenibili, sono versatili in quanto è molto semplice adattare un foglio di stile ad un documento ed possibile utilizzare stessi stili per molti elementi ottenendo effetti molto gradevoli e di semplice realizzazione... ma la dinamicità???

Tuttavia non è sbagliato dire che i CSS hanno proprietà dinamiche, o meglio non sarebbe sbagliato se si dicesse che con la proprietà style dell'oggetto document di JavaScript è possibile creare stilizzazioni "al volo" oppure effetti su elementi HTML in maniera dinamica.

Lo scopo di questo Tutorial non è quello di sostituire un foglio di stile CSS con un foglio di stile JavaScript, l'effetto sarebbe lo stesso ma ottenibile con il triplo dello sforzo: si vuole mostrare come è possibile aggiungere alla definizione di CSS anche la dinamicità, dimostrando la veridicità della "formula" Dhtml = JavaScript + CSS.

Per chi volesse visualizzare immediatamente l'esempio che realizzeremo in fondo all'articolo.

Definire lo stile di un elemento HTML utilizzando la sintassi JavaScript è operazione meno semplice che non utilizzando un semplice foglio di stile CSS. Una piccola prova ci servirà a vedere come "raggiungere" un elemento o un altro. C'è infatti differenza tra il raggiungimento di un oggetto di un modulo ed un elemento di testo: il primo viene identificato tramite il nome del form ed il nome dell'elemento; il secondo tramite un identificativo univoco di tipo id. Facciamo dunque una prova: create un documento HTML e inserite qualche elemento di un moddulo utilizzando lo script proposto per la formattazione:

<html>
   <head>
      <title>Fogli di stile JavaScript</title>
      <script type="text/javascript">
       
      </script>
   </head>
<body>
<div id="testo">Esempio di foglio di stile JavaScript</div>
<form name="modulo">
   <input type="text" name="textbox">
   <input type="button" name="button" value="Clicca">
</form>
</body>
</html>

Vediamo di aggiungere un po' di dinamicità. Provate ora a scrivere qualcosa del genere:

<html>
   <head>
      <title>Fogli di stile JavaScript</title>
      <script type="text/javascript">
       
      </script>
   </head>
<body>
<div id="testo">Esempio di foglio di stile JavaScript</div>
<form name="modulo">
   <input type="text" name="textbox">
   <input type="button" name="button" value="Clicca" onClick="Formatta()">
</form>
</body>
</html>

Se non lo avete ancora fatto, cliccate sul bottone creato sulla vostra pagina di prova per notare il cambiamento.

I due esempi precedenti ci sono serviti per mostrare come è possibile agire sull'elemento di un modulo ed un elemento di testo. Manca l'identificatore this che serve ad impostare, in questo caso, uno stile ad un elemento includendo il codice direttamente nell'evento dell'elemento stesso, vediamo un esempio:

Oltre alla proprietà style esiste un sistema per richiamare un'intera classe CSS al verificarsi di un evento. Prendiamo l'esempio precedente ed ampliamolo, includendo nell'evento onMouseOver una funzione che richiami la stilizzazione dinamica dell'elemento:

Vediamo il codice della funzione Formattami():

È abbastanza lungo e scomodo per ogni fase della formattazione dover sempre utilizzare l'espressione

document.modulo.bottone.style. // ... resto dell'espressione

Utilizziamo le stesse istruzioni stilistiche in un foglio di stile CSS puro

e riscriviamo la funzione Formattami() con l'utilizzo della proprietà studiata per lavorare con le classi className:

Essendo il corpo della funzione molto piccolo, per la precisione addirittura di una sola riga, possiamo trovare una scorciatoia (del resto la pigrizia dei programmatori porta sempre a soluzioni del genere!!!) scrivendo all'interno dell'evento nell'oggetto HTML:

Bando alle futilità, che comunque ci permettono di sviluppare una serie di ragionamenti ed idee sulla scorta delle funzionalità sintattiche di un linguaggio di programmazione, pensiamo a cosa potrebbero tornare utile i fogli di stile JavaScript (alias "semplici applicazioni DHTML) nell'immaginaria realtà di un sito o applicazione Web.

La prima cosa che mi viene in mente è applicare un foglio di stile JavaScript ad un'intera pagina per ottenere la stampa cartacea senza stampare elementi indesiderati come banner pubblicità o elementi coreografici diversi dal senso che avrebbe la stampa del reale contenuto della pagina.

Tempo fa realizzai con dei colleghi un'applicazione Web basata sull'XML: non potevamo lavorare con le QueryString di Asp, dato non avrebbe avuto senso utilizzare questa tecnica con l'XML per un discorso di praticità e di velocità; realizzare un file diverso per ogni modulo sarebbe significato un enorme dispendio di tempo, risorse, spazio su disco ed una noia mortale a riorganizzare singoli moduli in singoli file.

L'idea, per la verità non mia, fu questa, essendo le routine programmate interamente in JavaScript (che passavano i dati all'XML che tramite Asp li memorizzava nel Database Sql Server) aggiungemmo un foglio di stile JavaScript all'interno delle stesse funzioni che a seconda dell'operazione svolta, una registrazione, una modifica, una ricerca ecc... nascondevano il modulo appena utilizzato per mostrare il successivo.

Non me ne vorrà chi pensa che sia uscito fuori tema, il senso di queste ultime righe vogliono essere sia di aiuto a chi sviluppa XML ed incorre in necessità tipo quelle descritte, sia esplicative per mettere in pratica in maniera costruttiva ed intelligente un foglio di stile JavaScript.

Realizziamo quindi un bel visualizzatore di immagini con un numero di bottoni pari al numero di immagini presenti, ad ognuno verrà associata un immagine, quindi alla pressione del bottone "Paperino" apparirà la foto di Paperino nascondendo la foto precedente, e cosi per ognuna.

Realizziamo la struttura HTML, ovvero una tabella con lo spazio necessario ad ospitare la fotografia ed al di sotto una serie di bottoni, alla pressione di ognuno dei quelli verrà associata una diversa funzione, ecco il codice:

Abbiamo quindi quattro celle, nella prima inseriamo le tre immagini impostando per ognuna la proprietà style="display: None;", in modo da renderle inizialmente invisibili e farle apparire nella giusta cella al momento giusto. Ad ogni immagine è stato assegnato un identificativo di tipo id che ci servirà nelle rispettive funzioni, nelle altre tre inseriamo un bottone ciascuna, ognuno associato ad una diversa funzione per mostrare diverse immagini.

Ecco il codice JavaScript per il funzionamento del nostro visualizzatore:

function Immagine_01() {
   immagine2.style.display = "None";
   immagine3.style.display = "None";
   immagine1.style.display = "";
}

Quello che dobbiamo fare per prima cosa è preoccuparci di nascondere le immagini che non ci interessano, poi di mostrare quella che ci interessa, in questo caso la prima immagine. Vediamo ora il codice completo dello script:

Ecco l'esempio in pratica:

Per un visualizzatore di immagini per la verità esistono soluzioni migliori, tuttavia questo è solo un buon esempio di utilizzo dei fogli di stile JavaScript su cui si può iniziare a lavorare per sviluppare siti ben ottimizzati.

Prego di prestare attenzione ad una particolarità, la maggior parte degli attributi CSS sono composti da due parole separate da un trattino di sottrazione, ad esempio font-family, in JavaScript questi stessi vanno scritti senza trattino con l'iniziale della seconda parola in maiuscolo, quindi fontFamily, questo vale per tutti gli attributi, il cui elenco completo si può visualizzare consultando le Referenze CSS, messo a disposizione da lukeonweb.net in base alle specifiche rilasciate dal W3C e da Microsoft MSDN.

In funzione di quanto appena detto, vediamo come realizzare un reale foglio di stile utilizzando JavaScript, supponiamo di voler definire il colore dei link di una pagina, utilizziamo l'oggetto document nella seguente maniera:

Et voilà!

Indice lezioni

I Fogli di stile con JavaScript

Ti consigliamo anche

StandardJS: JavaScript con stile

jQuery Autocomplete: plugin, tutorial ed esempi

jQuery .removeClass: quando si usa, tutorial, esempi

HTML Redirect: come funziona, tutorial ed esempi