Метад attr

Метад attr дазваляе атрымаць і змяніць любы атрыбут элемента.

Важна не блытаць уласцівасці і атрыбуты элементаў. Пры стварэнні DOM дрэва атрыбуты пераўтвараюцца ў адпаведныя ім DOM уласцівасці элементаў. Іх назвы не заўсёды супадаюць, як і іх значэнні. Некаторыя ўласцівасці таксама могуць не мець адпаведных ім атрыбутаў, яны могуць быць атрыманы і ўстаноўлены толькі пры выкарыстанні метаду prop, напрыклад уласцівасць tagName.

Сінтаксіс

Атрыманне значэння атрыбута:

javascript$(селектар).attr(імя атрыбута);

Змяненне значэння атрыбута:

javascript$(селектар).attr(імя атрыбута, новае значэнне);

Змяненне значэнняў некалькіх атрыбутаў:

javascript$(селектар).attr({першы_атрыбут: новае_значэнне, другі_атрыбут: новае_значэнне, ...});

Ужыванне функцыі да кожнага элемента ў наборы:

javascript$(селектар).attr(імя атрыбута, function(нумар у наборы, бягучае значэнне атрыбута));

Прыклад

У наступным прыкладзе мы атрымаем інпут па яго id і вывядзем на экран значэнне яго атрыбута value:

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

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

Прыклад

А цяпер запішам новае значэнне 'www' ў гэты ж атрыбут:

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

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

HTML код стане выглядаць так:

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

Прыклад

Давайце памяняем адначасова атрыбуты type і value:

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

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

HTML код стане выглядаць так:

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

Прыклад

Давайце кожнаму інпуту памяняем атрыбут value - дадамо да бягучага value парадкавы нумар элемента ў наборы:

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;
});

HTML код стане выглядаць так:

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

Глядзіце таксама