Metoda setAttribute() obiektu Element HTML DOM

Definicja i użycie

setAttribute() Metoda dodaje określony atrybut i przypisuje mu określoną wartość.

Jeśli określony atrybut już istnieje, ustawia lub zmienia wartość.

Uwaga:Obiekt HTMLElement dokumentu HTML definiuje również JavaScriptowe atrybuty dla wszystkich standardowych atrybutów HTML. Dlatego używaj tej metody tylko wtedy, gdy musisz ustawić niestandardowe atrybuty.

Zobacz również:

Podręcznik:

Metoda getAttribute()

Metoda removeAttribute()

Metoda hasAttribute()

Metoda hasAttributes()

Metoda getAttributeNode()

Metoda setAttributeNode()

Metoda removeAttributeNode()

Tutorial:

Atrybuty HTML

Przykład

Przykład 1

Dodaj atrybut class do elementu:

element.setAttribute("class", "democlass");

Przed dodaniem:

Obiekt Element

Po dodaniu:

Obiekt Element

Spróbuj sam

Przykład 2

Zmień pole wejściowe na przycisk:

myInput.setAttribute("type", "button");

Spróbuj sam

Przed zmianą:

Po zmianie:

Przykład 3

Dodaj atrybut href do elementu <a>:

myAnchor.setAttribute("href", "");

Spróbuj sam

Przed dodaniem:

Odwiedź codew3c.com

Po dodaniu:

Odwiedź codew3c.com

Przykład 4

Zmień wartość atrybutu target na "_self":

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

Spróbuj sam

syntaktyka

element.setAttribute(name, value)

parametr

parametr opis
name wymagane. Nazwa atrybutu.
value wymagane. Nowa wartość atrybutu.

wartość zwracana

Brak.

rzucany

wyjątek opis
INVALID_CHARACTER_ERR parametr name Zawiera znaki, które nie są dozwolone w nazwach atrybutów HTML lub XML.
NO_MODIFICATION_ALLOWED_ERR Bieżący element jest tylko do odczytu, nie można go modyfikować.

Uwaga

Można dodać wartości do atrybutu style, ale nie zaleca się tego robić, ponieważ może to nadpisać inne atrybuty style.

Proszę użyj właściwości obiektu Style:

Wady:

element.setAttribute("style", "background-color:red;");

Zalety:

element.style.backgroundColor = "red";

Wsparcie przeglądarki

element.setAttribute() Jest to cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają je w pełni:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 9-11 Wsparcie Wsparcie Wsparcie Wsparcie