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:

$(selettore).attr(nome attributo);

Modificare il valore di un attributo:

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

Modificare i valori di più attributi:

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

Applicare una funzione a ogni elemento nel set:

$(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:

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

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

Esempio

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

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

Il codice HTML diventerà così:

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

Esempio

Modifichiamo simultaneamente gli attributi type e value:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

Il codice HTML diventerà così:

<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:

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

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

Il codice HTML diventerà così:

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

Vedi anche

metodo removeAttr,
che consente di eliminare gli attributi degli elementi
metodo prop,
che consente di lavorare con le proprietà degli elementi
metodo val,
che consente di ottenere e modificare il valore corrente di un elemento