Una delle caratteristiche principali di jQuery sono i selettori css con cui possiamo andare a individuare facilmente gli elementi del DOM su cui vogliamo operare.
jQuery ci permetti di fare in poche righe di codice javascript moltissime operazioni, molte delle quali comprendono modifiche grafichie visibili e animazioni. Una delle funzioni jQuery basilari con cui possiamo andare a modificare lo stile di un elemento del DOM è .css().
.css() è utile sia per modificare lo stile di un elemento si per poterlo controllare per varie operazioni.
1 2 | $("#elemento").css('float'); // Restituisce il valore assegnato al float dell'elemento $("#elemento").css('float', 'left'); // Assegna all'elemento left come valore del float |
Purtroppo questa funzione non riesce ad operare con attributi come margin, padding, border e background. Infatti l’attributo margin riassume al suo interno quattro differenti attributi relativi ai margin: top, right, bottom e left.
In questo caso andranno selezionati gli attributi specifici singolarmente.
1 2 | $("#elemento").css('margin-top'); // Restituisce il valore assegnato al margin top $("#elemento").css('margin-top', '10px'); // Assegna all'elemento 10px di margin top |
Lo stesso discorso vale anche per i padding e i border.
Se volessimo settare tutto il margin di un elemento la sintassi quindi sarà:
1 2 3 4 5 6 | $("#elemento").css({ marginTop: '10px', marginRight: '10px', marginBottom: '10px', marginLeft: '10px' }); |
Nell’ultimo esempio ho utilizzato una nomenclatura diversa: ad esempio quello che solitamente è margin-top ora è marginTop. Infatti .css() di jQuery accetta anche questo tipo di nomenclatura. Resta a discrezione dello sviluppatore scegliere quale utilizzare.
 di jQuery){kind=link}