Metoda attr

Metoda attr pozwala pobrać i zmienić dowolny atrybut elementu.

WaŜne jest, aby nie mylić właściwości i atrybutów elementów. Podczas tworzenia drzewa DOM atrybuty są konwertowane na odpowiadające im właściwości DOM elementów. Ich nazwy nie zawsze się pokrywają, podobnie jak ich wartości. Niektóre właściwości mogą również nie mieć odpowiadających im atrybutów, mogą być pobrane i ustawione tylko przy uŜyciu metody prop, na przykład właściwość tagName.

Składnia

Pobieranie wartości atrybutu:

$(selektor).attr(nazwa atrybutu);

Zmiana wartości atrybutu:

$(selektor).attr(nazwa atrybutu, nowa wartość);

Zmiana wartości wielu atrybutów:

$(selektor).attr({pierwszy_atrybut: nowa_wartość, drugi_atrybut: nowa_wartość, ...});

Zastosowanie funkcji do kaŜdego elementu w zestawie:

$(selektor).attr(nazwa atrybutu, function(numer w zestawie, bieŜąca wartość atrybutu));

Przykład

W następnym przykładzie pobierzemy input po jego id i wyświetlimy na ekranie wartość jego atrybutu value:

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

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

Przykład

A teraz zapiszmy nową wartość 'www' w ten sam atrybut:

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

Kod HTML będzie wyglądać tak:

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

Przykład

Zmieńmy jednocześnie atrybuty type i value:

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

Kod HTML będzie wyglądać tak:

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

Przykład

Zmieńmy dla kaŜdego inputa atrybut value - dodajmy do bieŜącego value numer porządkowy elementu w zestawie:

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

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

Kod HTML będzie wyglądać tak:

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

Zobacz teŜ

metoda removeAttr,
która pozwala usuwać atrybuty elementów
metoda prop,
która pozwala pracować z właściwościami elementów
metoda val,
która pozwala pobierać i zmieniać bieŜącą wartość elementu