Arrivare alla completa separazione - con successo - di struttura, presentazione e comportamento, applicando dinamicamente stili CSS agli elementi. Ultimo capitolo del corso di Javascript non intrusivo.
Separazione di CSS e Javascript
Potreste aver notato nei precedenti esempi che non abbiamo esattamente praticato quello che abbiamo spiegato.
Il nostro errore
E’ vero, abbiamo separato la struttura dalle azioni, ma abbiamo anche definito una presentazione via Javascript, il che è decisamente sbagliato da un punto di vista semantico.
Abbiamo definito la presentazione accedendo alle proprietà di stile degli elementi:
Questo significa che in qualunque momento sia necessario cambiare l’aspetto della nostra modifica, avremo bisogno di modificare il Javascript, e questo non è nè pratico nè intelligente.
Ci sono diversi modi per applicare una presentazione definita nei CSS a un elemento raggiunto via Javascript. Uno potrebbe voler applicare un ID a un elemento cambiando il suo attribute ID. Una via decisamente più versatile è quella di applicare una class all’elemento, specialmente in quanto gli elementi possono avere più di una classe.
Sintassi a classi multiple
Perchè un elemento possieda più di una class, basta semplicemente separare i nomi delle classe con uno spazio:
Questo è supportato da molta parte dei browser moderni, alcuni dei quali tuttavia mostrano qualche problema. IE su di un Mac non gradisce classi multiple quando una classe contiene il nome di un’altra, e si comporta decisamente male quando l’attributo class inizia o finisce con uno spazio.
Applicare classi via Javascript
Per aggiungere una classe a un certo elemento, dobbiamo modificre il suo attributo className. Quindi se vogliamo cambiare un elemento di navigazione solo se Javascript e il DOM sono disponibili, possiamo fare questo:
HTML:
Javascript:
Questo ci permetterà di definire due differenti stati nel nostro CSS:
Questo sovrascriverà ogni classe finora applicata all’elemento. Per questo abbiamo bisogno di controllare se esiste una precedente classe applicata ed aggiungere la nuova preceduta da uno spazio, nel caso.
Lo stesso si applica quando vogliamo rimuovere una classe aggiunta dinamicamente, in quanto alcuni browser non permettono una sintassi simile a class=”foo bar “. Questo può essere noioso, ed è molto più semplice riutilizzare una funzione che farà questo per noi (<- indica un ritorno a capo):
Questa funzione di esempio richiede quattro parametri:
a definisce l’azione che volete effettuare
o l’oggetto in questione
c1 il nome della prima classe
c2 il nome della seconda classe
Azioni possibili sono:
swap sostituisce la classe c1 con la classe c2 nell’oggetto o
add aggiunge la classe c1 all’oggetto o
remove rimuove la classe c1 dall’oggetto o
check controlla se la classe c1 è già applicata all’oggetto o e restituisce true o false.
Vediamo un esempio di come si può usare. Vogliamo tutte le testate di secondo livello (h2) espandere e comprimere il loro elemento più prossimo (next sibling). Una classe dovrebbe essere applicata alla testata per indicare che è un elemento dinamico, e una classe all’elemento successivo per nasconderlo. Una volta che una testata è attivata,, dovrebbe ricevere un altro stile e l’elemento successivo dovrebbe essere mostrato. Per rendere il tutto più interessante, vogliamo inoltre un effetto rollover sulla testata.
CSS:
Javascript:
Questo è il modo in cui abbiamo separato con successo struttura, presentazione e comportamento, e creato un effetto piuttosto complesso. La manutenzione di questo effetto è semplice e non richiede alcuna conoscenza di Javascript.
Salvate css.js per il vostro uso salvandolo tramite il seguente link sul vostro computer.
