Il metodo .css()

Abbiamo visto come aggiungere ad un elemento del DOM una proprietà CSS definita nel foglio di stile.

Alcune volte però è necessario applicare uno stile css inline per raggiungere un certo effetto.

Supponiamo che nel nostro style switcher volessi avere due bottoni che mi consentano di ingrandire e rimpicciolire il testo progressivamente.

HTML Code:

<div id="switcher">
<div class="label">Style Switcher</div>
<div class="button" id="switcher-large">Increase Text Size</div>
<div class="button" id="switcher-small">Decrease Text size</div>
</div>
<div class="speech">
<p>Fourscore and seven years ago our fathers brought forth on
this continent a new nation, conceived in liberty, and dedicated
to the proposition that all men are created equal.</p>
</div>

Userò il metodo .css() per fare in modo di ottenere ogni volta il valore corrente del font ed incrementarlo o decrementarlo. Il metodo CSS si può usare in questi due modi:

• .css('property','value')
• .css({property1: 'value1', 'property-2': 'value2'})

Applico quindi ad un elemnto del dom un selettore css chiamando direttamente la proprietà e aggiornandone il valore. Il secondo metodo è tipico della notazione JSON (Javascript object notation): all'interno delle parentesi graffe, con cui si denota la costruzione di un oggetto definisco delle cooppie nome-valore.

Javascript code:

$(document).ready(function() {

  $('div.button').click(function() {

    var $speech = $('div.speech');

    var currentSize = $speech.css('fontSize');

    var num = parseFloat(currentSize, 10);

    var unit = currentSize.slice(-2);

    if (this.id == 'switcher-large') {

      num *= 1.4;   
   
    } else if (this.id == 'switcher-small') {

      num /= 1.4;

    }

    $speech.css('fontSize', num + unit);

  });

});

• $(document).ready(function() - gestore d'evento per il load della pagina
• $('div.button').click(function() - gestore d'evento per il click su tutti i bottoni
• var $speech = $('div.speech'); - metto in variabile l'elemento che contiene il testo
• var currentSize = $speech.css('fontSize'); - recupero il valore font-size del testo (Il metodo css fuziona anche come getter oltre che come setter)
• var num = parseFloat(currentSize, 10); - trasforma la stringa in un numero a base decimale (il valote font-size è una stringa es.: '12px')
• var unit = currentSize.slice(-2); - memorizzo la desinenza 'px' che poi dovrò riassegnare
• Nel caso prema il bottone 'switcher-large' moltiplico il valore per 1.4 al contrario divido
• $speech.css('fontSize', num + unit); - Infine assegno il nuovo valore tramite il metodo .css();

Ed ecco il risultato: style switcher increase decrease sample