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:
$(selektor).attr(názov atribútu);
Zmena hodnoty atribútu:
$(selektor).attr(názov atribútu, nová hodnota);
Zmena hodnôt viacerých atribútov:
$(selektor).attr({prvý_atribút: nová_hodnota, druhý_atribút: nová_hodnota, ...});
Aplikácia funkcie na každý element v súbore:
$(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:
<input type="text" value="!!!" id="test">
let value = $('#test').attr('value');
console.log(value);
Príklad
A teraz zapíšeme novú hodnotu 'www'
do tohto istého atribútu:
<input type="text" value="!!!" id="test">
$('#test').attr('value', 'www');
HTML kód bude vyzerať takto:
<input type="text" value="www" id="test">
Príklad
Poďme zmeniť súčasne atribúty type
a value:
<input type="text" value="!!!" id="test">
$('#test').attr({value: 'www', type: 'password'});
HTML kód bude vyzerať takto:
<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:
<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">
$('input').attr('value', function(index, value) {
return value + ' ' + index;
});
HTML kód bude vyzerať takto:
<input type="text" value="aaa 0">
<input type="text" value="bbb 1">
<input type="text" value="ccc 2">
Pozri tiež
-
metóda
removeAttr,
ktorá umožňuje odstraňovať atribúty elementov -
metóda
prop,
ktorá umožňuje pracovať s vlastnosťami elementov -
metóda
val,
ktorá umožňuje získať a zmeniť aktuálnu hodnotu elementu