De attr-methode

De methode attr maakt het mogelijk om elk attribuut van een element te verkrijgen en te wijzigen.

Het is belangrijk om eigenschappen (properties) en attributen van elementen niet te verwarren. Bij het creëren van de DOM-structuur worden attributen omgezet in de bijbehorende DOM-eigenschappen van elementen. Hun namen komen niet altijd overeen, net als hun waarden. Sommige eigenschappen hebben mogelijk ook geen bijbehorende attributen; ze kunnen alleen worden verkregen en ingesteld bij gebruik van de methode prop, bijvoorbeeld de eigenschap tagName.

Syntaxis

De waarde van een attribuut verkrijgen:

$(selector).attr(attribuutnaam);

De waarde van een attribuut wijzigen:

$(selector).attr(attribuutnaam, nieuwe waarde);

De waarden van meerdere attributen wijzigen:

$(selector).attr({eerste_attribuut: nieuwe_waarde, tweede_attribuut: nieuwe_waarde, ...});

Een functie toepassen op elk element in de set:

$(selector).attr(attribuutnaam, function(index in set, huidige attribuutwaarde));

Voorbeeld

In het volgende voorbeeld selecteren we een input via zijn id en tonen we de waarde van zijn value-attribuut:

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

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

Voorbeeld

Laten we nu een nieuwe waarde 'www' in hetzelfde attribuut zetten:

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

De HTML-code ziet er dan zo uit:

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

Voorbeeld

Laten we tegelijkertijd de attributen type en value wijzigen:

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

De HTML-code ziet er dan zo uit:

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

Voorbeeld

Laten we voor elke input het value-attribuut wijzigen - we voegen de index van het element in de set toe aan de huidige value waarde:

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

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

De HTML-code ziet er dan zo uit:

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

Zie ook

de methode removeAttr,
die het mogelijk maakt attributen van elementen te verwijderen
de methode prop,
die het mogelijk maakt om met eigenschappen van elementen te werken
de methode val,
die het mogelijk maakt de huidige waarde van een element te verkrijgen en te wijzigen