Metóda attr

Metóda attr umožňuje získať a zmeniť ľubovoľný atribút elementu.

Je dôležité nezamieňať vlastnosti a atribúty elementov. Pri vytváraní DOM stromu sa atribúty konvertujú na zodpovedajúce DOM vlastnosti elementov. Ich názvy nie vždy súhlasia, rovnako ako ich hodnoty. Niektoré vlastnosti tiež nemusia mať zodpovedajúce atribúty, môžu byť získané a nastavené len pri použití metódy prop, napríklad vlastnosť tagName.

Syntax

Získanie hodnoty atribútu:

javascript$(selektor).attr(názov atribútu);

Zmena hodnoty atribútu:

javascript$(selektor).attr(názov atribútu, nová hodnota);

Zmena hodnôt viacerých atribútov:

javascript$(selektor).attr({prvý_atribút: nová_hodnota, druhý_atribút: nová_hodnota, ...});

Aplikácia funkcie na každý element v súbore:

javascript$(selektor).attr(názov atribútu, function(číslo v súbore, aktuálna hodnota atribútu));

Príklad

V nasledujúcom príklade získame input podľa jeho id a vypíšeme na obrazovku hodnotu jeho atribútu value:

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

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

Príklad

A teraz zapíšeme novú hodnotu 'www' do tohto istého atribútu:

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

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

HTML kód bude vyzerať takto:

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

Príklad

Poďme zmeniť súčasne atribúty type a value:

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

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

HTML kód bude vyzerať takto:

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

Príklad

Poďme každému inputu zmeniť atribút value - pridáme k aktuálnemu value poradové číslo elementu v súbore:

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 kód bude vyzerať takto:

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

Pozri tiež