buzzoole code

Iniziamo a Lavorare con i CSS e jQuery

jQuey logo scrivi meno e fai di più

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.
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.
Questo Blog è Indipendente e Supportato Solamente dai suoi Lettori.
Se vuoi sostenerlo, Condivi il Post sui Social Network:
Aggiungi il nostro sito alla Whitelist di Adblock Plus
e magari Fai Anche un Acquisto su Amazon partendo da Qui
(a te non costa nulla!).