Leggere e scrivere gli stili CSS in jQuery

jQuery dispone dell'efficace metodo .css() per leggere e scrivere gli stili CSS di un elemento. In questo articolo vedremo in dettaglio questo metodo.

Questo metodo ha due sintassi distinte, una per leggere il valore di una proprietà CSS e l'altra per impostare gli stili dell'elemento. La prima è come mostrato nell'esempio:

var fontFamily = $('#test').css('fontFamily');

Come regola di massima le proprietà CSS che contengono trattini andrebbero scritte nella notazione camel case. Quindi font-family diventa fontFamily.

La seconda sintassi, in scrittura, è duplice. Possiamo avere una coppia di valori quando dobbiamo impostare una sola proprietà:

$('#test').css('color', '#c00');

oppure un più efficace oggetto letterale quando le proprietà da impostare sono più d'una:

$('#test').css({
	color: '#333',
	padding: '1em',
	border: 'thick solid',
	backgroundColor: 'silver'
});

Le virgolette intorno alle proprietà CSS sono obbligatorie solo nel caso della proprietà float che in JavaScript è una parola riservata per uso futuro:

$('#test').css({
	'float': 'left',
	margin: '5px'
});