The setAttribute() metoda se používá k nastavení nebo přidání atributu ke konkrétnímu prvku a poskytuje mu hodnotu. Pokud atribut již existuje, pouze nastaví nebo změní hodnotu atributu. Můžeme tedy použít i setAttribute() metoda k aktualizaci hodnoty existujícího atributu. Pokud odpovídající atribut neexistuje, vytvoří se nový atribut se zadaným názvem a hodnotou. Tato metoda nevrací žádnou hodnotu. Název atributu se automaticky převede na malá písmena, když jej použijeme v prvku HTML.
I když můžeme přidat styl atribut pomocí setAttribute() metodu, ale nedoporučuje se tuto metodu používat pro styling. Pro přidávání stylů můžeme použít vlastnosti objektu stylu, které styl efektivně změní. To může být jasné s následujícím kódem.
Nesprávný způsob
Ke změně stylu se doporučuje nepoužívat.
element.setAttribute('style', 'background-color: blue;');
Správný způsob
Správný způsob změny stylu je uveden níže.
element.setAttribute.backgroundColor = 'blue';
Abychom získali hodnotu atributu, můžeme použít getAttribute() a k odstranění konkrétního atributu z prvku můžeme použít removeAtribute() metoda.
Pokud přidáváme booleovský atribut jako např zakázáno , pak je jakákoliv hodnota, kterou má, vždy považována za skutečný . Pokud požadujeme nastavit hodnotu atributu Boolean na Nepravdivé , musíme odstranit celý atribut pomocí removeAttribute() metoda .
Syntax
element.setAttribute(attributeName, attributeValue)
Argumenty této metody nejsou volitelné. Při použití této metody musí být zahrnuty oba parametry. Hodnoty parametrů této metody jsou definovány následovně.
Hodnoty parametrů
název_atributu: Je to název atributu, který chceme přidat k prvku. Nemůže zůstat prázdný; tj. není volitelné.
atributValue: Je to hodnota atributu, kterou přidáváme k prvku. Není to také volitelná hodnota.
Pojďme pochopit, jak používat setAttribute() metodou pomocí některých ilustrací.
json v příkladu json
Příklad1
V tomto příkladu přidáme a href atribut s hodnotou 'https://www.javatpoint.com/' k označit s id = 'odkaz' .
JavaScript setAttribute() method function fun() { document.getElementById('link').setAttribute('href', 'https://www.javatpoint.com/'); } <h2> It is an example of adding an attribute using the setAttribute() method. </h2> <a id="link"> javaTpoint.com </a> <p> Click the follwing button to see the effect. </p> Add attribute Otestujte to hned Výstup
Po provedení výše uvedeného kódu bude výstupem -
Vidíme, že před kliknutím na dané tlačítko se odkaz nevytvoří. Po kliknutí na tlačítko bude výstup -
operátor zbytku pythonu
Nyní vidíme, že odkaz je vytvořen.
Příklad2
V tomto příkladu aktualizujeme hodnotu existujícího atributu pomocí setAttribute() metoda. Zde převádíme textové pole na tlačítko změnou hodnoty typ atribut od text na knoflík .
Abychom viděli efekt, musíme kliknout na zadané tlačítko.
JavaScript setAttribute() method function fun() { document.getElementById('change').setAttribute('type', 'button'); } <h2> It is an example to update an attribute's value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change Otestujte to hned Výstup
Po provedení výše uvedeného kódu bude výstupem -
Po kliknutí na tlačítko bude výstup -
Příklad3
Zde přidáváme booleovský atribut zakázáno pro deaktivaci zadaného tlačítka. Pokud nastavíme hodnotu zakázáno atribut na prázdný řetězec, pak se automaticky nastaví na true, což způsobí, že tlačítko bude deaktivováno.
JavaScript setAttribute() method function fun() { document.getElementById('btn').setAttribute('disabled', ''); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me Otestujte to hned Výstup
Po provedení výše uvedeného kódu bude výstupem -
Po kliknutí na tlačítko bude výstup -
