Metodo attr

Il metodo attr consente di ottenere e modificare qualsiasi attributo di un elemento.

È importante non confondere le proprietà e gli attributi degli elementi. Quando si crea il DOM, gli attributi vengono convertiti nelle corrispondenti proprietà DOM degli elementi. I loro nomi non sempre coincidono, così come i loro valori. Alcune proprietà potrebbero anche non avere attributi corrispondenti; possono essere ottenute e impostate solo utilizzando il metodo prop, ad esempio la proprietà tagName.

Sintassi

Ottenere il valore di un attributo:

javascript$(selettore).attr(nome attributo);

Modificare il valore di un attributo:

javascript$(selettore).attr(nome attributo, nuovo valore);

Modificare i valori di più attributi:

javascript$(selettore).attr({primo_attributo: nuovo_valore, secondo_attributo: nuovo_valore, ...});

Applicare una funzione a ogni elemento nel set:

javascript$(selettore).attr(nome attributo, function(numero nel set, valore attuale dell'attributo));

Esempio

Nel seguente esempio, otterremo un input tramite il suo id e visualizzeremo il valore del suo attributo value:

html<input type="text" value="!!!" id="test">

javascriptlet value = $('#test').attr('value');
console.log(value);

Esempio

E ora scriviamo un nuovo valore 'www' nello stesso attributo:

html<input type="text" value="!!!" id="test">

javascript$('#test').attr('value', 'www');

Il codice HTML diventerà così:

html<input type="text" value="www" id="test">

Esempio

Modifichiamo simultaneamente gli attributi type e value:

html<input type="text" value="!!!" id="test">

javascript$('#test').attr({value: 'www', type: 'password'});

Il codice HTML diventerà così:

html<input type="password" value="www" id="test">

Esempio

Modifichiamo l'attributo value per ogni input - aggiungendo al value corrente il numero d'ordine dell'elemento nel set:

html<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

javascript$('input').attr('value', function(index, value) {
  return value + ' ' + index;
});

Il codice HTML diventerà così:

html<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Vedi anche