Lezioncina decisamente poco impegnativa, ma importante perché potreste sfruttarla non poco. Infatti, non potevo non parlarvi di come poter facilmente gestire, leggere e modificare proprietà css con jQuery.
jQuery rende estremamente facile assegnare un valore o modificarlo in una proprietà css rispetto a uno o più elementi. Anche se JQuery offre tutta una serie di funzioni (cross- browser) che provvedono a lavorare con i CSS, vediamo le due più importanti.
La prima è la semplice css(nome) che restituisce il valore della proprietà CSS specificata per il primo elemento corrispondente.
La seconda è css(proprietà, valore) e imposta una singola proprietà su un determinato valore su tutti gli elementi corrispondenti.
Vediamo un esempio che, come al solito, chiarisce molto più delle chiacchiere teoriche.
Supponiamo, senza scrivere tutto l’html, di avere una tabella con varie righe (<tr>) che elencano automobili inserita in un div con identificatore <div id=”auto”>
Vediamo come ottenere il valore di una proprietà css relativa ad un elemento specifico.
$(document).ready(functions() {
var fontSize = $(‘#auto tr:first’).css(‘font-size’)
}
Il codice é banale quanto esplicativo. Abbiamo, dopo aver atteso il caricamento degli elementi della pagina, salvato in una variabile il valore della proprietà css ‘font-size’ relativa solo al primo elemento individuato dal selettore composto (#auto tr).
Passiamo, ora, a modificare un valore.
$(document).ready(functions() {
$(‘#auto tr:even’).css(‘background-color’,‘#dddddd’)
}
In questo caso, il filtro even() e l’azione css consentono di impostare un nuovo colore di sfondo solo alle righe dispari presenti nel div con identificatore #auto
Qualora volessimo, come può tranquillamente accadere, settare più di una proprietà, il Javascript, e di conseguenza anche jQuery, consentono di farlo in modo abbastanza snello evitando di ripetere inutilmente alcune istruzioni :
$(document).ready(functions() {
$(‘#auto tr:even’).css(
‘background-color’ : ‘#dddddd’, ‘color’ : ‘#666666’, ‘font-size’ : ‘10pt’)
}
Resta il fatto che, per realizzare quanto appena visto, é sempre conveniente mettere il codice css in una classe specifica centralizzata ed utilizzare il metodo addClass(‘class_name’) di cui abbiamo parlato nella lezione precedente dedicata proprio ad attributi e classi in jQuery.
