Iniziamo a Lavorare con i CSS e jQuery
Non potevano mancare all’interno di jQuery le funzioni per lavorare con i CSS.
JQuery offre infatti una serie di funzioni che provvedono a lavorare con i CSS, e che permettono di impostare proprietà e valori in una maniera molto semplice e per di più cross-browser.
La funzione principale jQuery mette a nostra disposizione è css() la quale ci permette di trovare e impostare lo stile CSS per un set di elementi corrispondenti.
Filtro |
Scopo |
| css(nome) | restituisce il valore della proprietà CSS specificata per il primo elemento corrispondente. |
| css(proprietà) | permette di impostare le proprietà CSS di ogni elemento corrispondente utilizzando una sintassi ad oggetti.
var oggettoCSS = {
'background-color' : 'red',
'margin' : 'auto',
'....' : '....' }
$(this).css(oggettoCSS);
|
| css(proprietà, valore) | imposta una singola proprietà ad un determinato valore su tutti gli elementi corrispondenti. Se viene fornito un numero, viene automaticamente convertito in un valore di pixel, fatta eccezione per: z-index, opacity, zoom e line-height in quanto sono proprietà che tipicamente non accettano valori di pixel come argomento. |
jQuery fornisce una serie di funzioni per lavorare con le classi CSS, e sono tutte quelle funzioni che sono tipicamente utilizzate per realizzare delle animazioni, oppure dei menù.
Funzione CSS |
Scopo |
| addClass(classe) | Aggiunge la classe o le classi specificate ad ogni set di elementi corrispondenti. |
| hasClass(classe) | Restituisce vero se la classe specificata è presente in almeno uno dei set di elementi corrispondenti. |
| removeClass(classe) | Rimuovere la classe o le classi specificate da una set di elementi corrispondenti. |
| toggleClass(classe) | aggiunge la classe specificata se non presente, oppure la rimuove se è presente |
| toggleClass(classe,switch) | aggiunge la classe specificata se lo switch ha valore vero, la rimuove se invece lo switch è falso. |
Un altro insieme di funzioni che jQuery mette a nostra disposizione per lavorare con i CSS riguardano il posizionamento.
Come sempre si tratta di funzioni cross-browser.
Funzione CSS |
Scopo |
| offset() | restituisce l’offset del primo elemento corrispondente in pixel, relativo al documento. |
| offsetParent() | restituisce una collezione jQuery con la posizione dell’elemento genitore del primo elemento corrispondente. |
| position() | restituisce la posizione rispetto al top ed a sinistra di un elemento relativo all’offset dell’elemento genitore. |
| scrollTop() | Restituisce lo scroll dall’alto del primo elemento specificato. |
| scrollTop(valore) | imposta lo scroll dall’alto su tutti gli elementi corrispondenti. |
| scrollLeft() | restituisce l’offset rispetto alla sinistra del primo elemento specificato. |
| scrollLeft(valore) | imposta lo scroll sinistro rispetto su tutti gli elementi corrispondenti. |
Infine vediamo un insieme di funzioni che servono al fine di trovare le dimensioni degli elementi.
Anche queste ultime sono cross-browser che si rilevano molto utili per svariate applicazioni.
Funzione CSS |
Scopo |
| height() | restituisce l’altezza in pixel del primo elemento corrispondente. |
| height(valore) | imposta all’altezza di ogni elemento corrispondente. |
| width() | restituisce la larghezza del primo elemento corrispondente |
| width(valore) | imposta alla larghezza di ogni elemento corrispondente |
| innerHeight() | restituisce l’altezza interna (escludendo il bordo e includendo il padding) per il primo elemento corrispondente. |
| innerWidth() | restituisce la larghezza interna (escludendo il bordo ed includendo il padding) per ogni elemento corrispondente. |
| outerHeight(margine) | restituisce l’altezza esterna (incluso il bordo e il padding) per il primo elemento corrispondente. Se l’argomento “margine” è incluso viene preso anche solo in considerazione. |
| outerWidth(margine) | restituisce la larghezza esterna, funziona esattamente come la funzione appena vista. |