Home » Web Development » jQuery » Lavorare con margin, border e background con .css() di jQuery

Lavorare con margin, border e background con .css() di jQuery

margin, border, padding
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.

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...