PROGRAMMIAMO
JS - Lavorare con gli stili: css
Modificare o aggiungere gli stili di un elemento

Supponiamo di avere una pagina in cui, passando col mouse sopra la pagina stessa, si voglia cambiare il colore di sfondo. Possiamo realizzarla in questo modo:

$("body").mouseover(function(){ $(this).css("background-color","gray"); });

La parte dell'istruzione precedente che modifica (o aggiunge, se non presente) lo stile è questa:

$(this).css("background-color","gray");

Come si vede la sintassi è sostanzialmente la stessa usata per modificare gli attributi, salvo il nome del metodo che in questo caso è css.

E' anche interessante, per inciso, sfruttare l'evento hover, non presente come evento nativo in javascript, che consente di catturare sia il mouseover che il mouseout, nel seguente modo:

$("body").hover(
                function(){ $(this).css("background-color","gray"); } ,
                function(){ $(this).css("background-color", "white"); }
                 );

Come si può notare, usando hover occorre specificare due funzioni: la prima indica ciò che accade quando il mouse passa sull'oggetto e la seconda ciò che accade quando il mouse lascia l'oggetto. Nell'esempio qui sopra lo sfondo diventa grigio quando il mouse passa sull'elemento body e torna bianco quando se ne allontana (bisogna specificare due funzioni, perché in realtà si tratta di due eventi in uno).

Anche nel caso di css è possibile modificare più stili insieme usando un object literal, cioè una sequenza racchiusa fra graffe, come mostra l'esempio seguente che modifica gli stili di tutti i paragrafi del documento:

$('p').css({ 'background-color': '#dddddd', 'color': '#666666', 'font-size': '11pt', 'line-height': '2.5em' });

 

Recuperare il valore di uno stile

Esattamente come il metodo attr, anche css può essere usato "al contrario", cioè per recuperare il valore di uno stile (invece di modificarlo), come mostra l'esempio seguente:

 $(".colorato").click(function(){
                        alert("Colore sfondo: " + $(this).css('background-color'));
});

Anche in questo caso, se esistono più elementi corrispondenti al selettore usato (.colorato nel nostro esempio), il metodo css torna il valore solo del primo.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it