Nella precedente lezione abbiamo visto come manipolare il DOM alterando gli elementi già presenti nella pagina, eliminandoli o aggiungendone di nuovi. In questa lezione vedremo come lavorare sull’aspetto visivo degli elementi della pagina attraverso la manipolazione delle proprietà CSS.
Esistono diversi metodi grazie ai quali è possibile modificare l’aspetto di uno o più elementi della pagina e per questioni espositive andiamo a suddividere questi metodi in tre gruppi a seconda che il nostro obiettivo sia intervenire su:
- specifiche proprietà CSS;
- le dimensioni dell’elemento;
- il posizionamento dell’elemento.
Il metodo .css()
Il metodo .css() è il principale protagonista della nostra lezione. Attraverso questo metodo, infatti, possiamo intervenire su specifiche proprietà CSS di un dato elemento e modificarle a nostro piacimento. Oltre a questo, il metodo in esame ci consente di conoscere il valore attuale di una data proprietà CSS. Vediamo alcuni esempi che meglio chiariranno il suo funzionamento:
// imposto un nuovo colore per i link del menu
$('#menu a').css('color','#0000FF');
// recupero il valore attuale del colore dei link del nostro menu
var colore = $('#menu a').css('color');Nell’esempio qui sopra abbiamo visto come assegnare un nuovo valore ad una singola proprietà (nell’esempio color). Ma se avessimo voluto operare su una pluralità di proprietà? Una soluzione avrebbe potuto essere quella di concatenare diverse chiamate al metodo .css() in questo modo:
$('#menu a').css('color','#0000FF').css('background-color','#FFFF00');Tuttavia una simile soluzione, seppur funzionante, non può dirsi corretta. Vediamo quindi come ottenere lo stesso risultato mediante un’unica chiamata del metodo:
$('#menu a').css({ 'color': '#0000FF', 'background-color': '#FFFF00' });Come potete vedere all’interno del metodo .css() abbiamo utilizzato due parentesi graffe all’interno delle quali abbiamo definito un oggetto composto da due coppie di attributi/valori. La sintassi è la seguente:
'attributo': 'valore'Da notare che le coppie sono divise tra loro con una virgola.
E’ appena il caso di dire che nel nostro esempio abbiamo settato due proprietà ma nulla vieta di impostare simultaneamente un gran numero di proprietà CSS non essendoci alcun limite in tal senso.
Gestire le dimensioni con .width() e .height()
I metodi .width() e .height() servono, rispettivamente, per conoscere o settare la larghezza e l’altezza di un elemento. Vediamo un paio di esempi:
// quanto è alto l'elemento con id #banner?
var altezza = $('#banner').height();
// imposto le nuove dimensioni del div #banner
$('#banner').width(300).height(250);Questi metodi possono essere definiti come delle scorciatoie del metodo .css() in quanto possiamo notare come il metodo .height() altro non sia che l’abbreviazione di .css(‘height’) e .width() l’abbreviazione di .css(‘width’).
Da segnalare che jQuery prevede quattro varianti di questi due metodi, precisamente:
- innerHeight(): consente di ricavare/impostare l’altezza di un elemento comprensiva di eventuale padding;
- innerWidth(): consente di ricavare/impostare l’altezza di un elemento comprensiva di eventuale padding;
- outerHeight(): consente di ricavare/impostare l’altezza di un elemento comprensiva di eventuale padding, bordo e margin;
- outerWidth(): consente di ricavare/impostare l’altezza di un elemento comprensiva di eventuale padding, bordo e margin;
Il funzionamenti di questi metodi è identico a quello già visto per .width() e .height().
Gestire la posizione con .offset() e .position()
Attraverso specifici metodi è possibile gestire la posizione di un elemento all’interno della pagina. Questi metodi sono:
- .offset() – consente di conoscere/settare la posizone di un elemento in relazione all’intero documento;
- .position() – consente di conoscere/settare la posizone di un elemento in relazione al suo contenitore.
Si noti che questi due metodi restituiscono il medesimo risultato qualora il genitore dell’elemento sezionato non abbia un posizionamento (proprietà position dei CSS) o questo abbia valore "static".
Il funzionamento di questi due metodi è pressoché identico. In fase di GET entrambi restituiscono i valori di top e left. Vediamo un esempio:
// salvo in una variabile i valori relativi alla posizione dell'elemento nella pagina
var offset = $('#avviso').offset();
// stampo a video i valori restituiti da .offset()
document.write('top:' + offset.top + ' - left:' + offset.left);Attraverso questi metodi è anche possibile impostare in modo arbitrario la posizione di un elemento passando una coppia di valori relativamente alle proprietà top e left, vediamo un esempio:
// imposto delle nuove coordinate per l'elemento
$('#avviso').offset({ top: 50, left: 10 });Ancora una volta dobbiamo distringuere tra .offset() e .position(): il primo posiziona l’elemento in relazione al documento, il secondo in relazione all’elemento genitore, sempre che quest’ultimo abbia un valore di position esplicitato o diverso da "static". In caso contrario i due metodi sortiranno lo stesso effetto.
