PROGRAMMIAMO
JS - Lavorare con gli attributi: attr
Modificare gli attributi di un elemento

Supponiamo di voler modificare l'attributo src di un'immagine in risposta a un evento click su un pulsante. Per ottenere questo in jQuery dobbiamo usare il metodo attr in questo modo:

$("#bottone").click(function(){ $("#omino").attr("src","../immagini/omino2.jpg"); });

La parte dell'istruzione precedente che modifica il valore dell'attributo è questa:

$("#omino").attr("src","../immagini/omino2.jpg");

La sintassi segue la regola generale di jQuery:

Anatomia istruzione jQuery

In questo caso l'azione si chiama attr e ha due parametri: il primo indica il nome dell'attributo fra apici (doppi o singoli), mentre il secondo (separato da virgola) indica il nuovo valore da assegnare all'attributo stesso (sempre fra apici).

E' possibile anche modificare più di un attributo per lo stesso elemento (o gruppo di elementi) selezionato. In questo caso l'elenco di attributi e relativi valori deve essere racchiuso fra parentesi graffe (una lista di questo genere viene chiamata object literal). Per esempio:

$("#omino").attr({
                      "src" : "../immagini/omino2.jpg",
                      "width" : "100px"
});

Si presti attenzione a una possibile fonte di confusione. Quando si vuole modificare un solo attributo, si usa la virgola per separare il nome dal valore dell'attributo; quando invece si vuole fornire una lista di attributi da modificare, occorre usare i due punti per separare nome e valore, mentre la virgola serve per separare le coppie una dall'altra.

Un'altra possibile fonte di confusione e di errore è l'uso degli apici (singoli o doppi non fa differenza) per delimitare i nomi degli attributi. In realtà gli apici si possono omettere sulle parole chiavi (e molti programmatori lo fanno) quando queste sono costituite da un'unica parola, senza trattini di separazione. Per esempio sarebbe perfettamente corretto scrivere:

$("#omino").attr({
                      src : "../immagini/omino2.jpg",
                      width : "100px"
});

Siccome tuttavia ci possono essere parole chiave contenenti il trattino (es. background-color) che devono essere obbligatoriamente chiuse fra apici, conviene usare gli apici sempre in tutti i casi.

Recuperare il valore di un attributo

Il metodo attr può anche essere usato per recuperare il valore di un attributo, cioè per usarne il valore, invece di modificarlo.

Si consideri questo semplice esempio:

 $("#immagine").click(function(){
                        alert("Width: " + $(this).attr("width"));
});

Si osservi come in questo caso fra le parentesi di attr viene scritto solo il nome dell'attributo di cui si vuole recuperare il valore.

Si osservi che nel caso che la selezione comprenda più di un elemento, il metodo attr usato in questo modo (per recuperare il valore di un attributo) torna solo il primo elemento presente nel DOM.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it