Metoda attr

Metoda attr permite obținerea și modificarea oricărui atribut al elementului.

Este important să nu confundați proprietățile și atributele elementelor. La crearea arborelui DOM, atributele sunt convertite în proprietățile DOM corespunzătoare ale elementelor. Numele și valorile lor nu coincid întotdeauna. Unele proprietăți pot să nu aibă atribute corespunzătoare, ele pot fi obținute și setate doar folosind metoda prop, de exemplu proprietatea tagName.

Sintaxă

Obținerea valorii unui atribut:

$(selector).attr(numele atributului);

Modificarea valorii unui atribut:

$(selector).attr(numele atributului, valoarea nouă);

Modificarea valorilor mai multor atribute:

$(selector).attr({primul_atribut: valoarea_nouă, al_doilea_atribut: valoarea_nouă, ...});

Aplicarea unei funcții pentru fiecare element din set:

$(selector).attr(numele atributului, function(numărul din set, valoarea curentă a atributului));

Exemplu

În următorul exemplu, vom obține un input după id-ul său și vom afișa valoarea atributului său value:

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

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

Exemplu

Acum să scriem o nouă valoare 'www' în același atribut:

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

Codul HTML va arăta astfel:

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

Exemplu

Să schimbăm simultan atributele type și value:

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

Codul HTML va arăta astfel:

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

Exemplu

Să schimbăm pentru fiecare input atributul value - adăugând la value-ul curent numărul de ordine al elementului din 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;
});

Codul HTML va arăta astfel:

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

Vezi și

metoda removeAttr,
care permite ștergerea atributelor elementelor
metoda prop,
care permite lucrul cu proprietățile elementelor
metoda val,
care permite obținerea și modificarea valorii curente a elementului