HTML DOM Element setAttribute() metod

Definition och användning

setAttribute() Metoden lägger till det specificerade attributet och tilldelar det ett specifikt värde.

Om den specificerade attributen redan finns, sätts eller ändras endast värdet.

Observera:HTML-dokumentets HTMLElement-objekt definierar också JavaScript-attribut för alla standard HTML-attribut. Därför behöver du bara använda detta metod när du behöver ställa in icke-standardattribut.

Se också:

Referenshandbok:

getAttribute() metoden

removeAttribute() metoden

hasAttribute() metoden

hasAttributes() metoden

getAttributeNode() metoden

setAttributeNode() metoden

removeAttributeNode() metoden

Tutorial:

HTML-attribut

Exempel

Exempel 1

Lägg till class-attribut till elementet:

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

Innan du lade till:

Element-objekt

Efter att ha lagt till:

Element-objekt

Prova själv

Exempel 2

Ändra inmatningsfältet till en knapp:

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

Prova själv

Innan du ändrade:

Efter att ha ändrat:

Exempel 3

Lägg till href-egenskapen till <a>-elementet:

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

Prova själv

Innan du lade till:

Besök codew3c.com

Efter att ha lagt till:

Besök codew3c.com

Exempel 4

Ändra värdet på target-egenskapen till "_self":

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

Prova själv

Syntax

element.setAttribute(name, value)

Parameter

Parameter Beskrivning
name Obligatoriskt. Egenskapens namn.
value Obligatoriskt. Ny egenskapsvärde.

Returvärde

Inget.

Kastar

Undantag Beskrivning
INVALID_CHARACTER_ERR Parameter name Tecken som inte är tillåtna i HTML-egenskapsnamn eller XML-egenskapsnamn.
NO_MODIFICATION_ALLOWED_ERR Det aktuella elementet är skrivskyddat och tillåter inte att dess egenskaper ändras.

Observera

Det är möjligt att lägga till en style-egenskap med ett värde till elementet, men det rekommenderas inte att du gör detta eftersom det kommer att överskriva andra egenskaper i style-egenskapen.

Använd Style-objektets egenskaper istället:

Nackdelar:

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

Fördelar:

element.style.backgroundColor = "red";

Webbläsarstöd

element.setAttribute() Det är en DOM Level 1 (1998) egenskap.

Alla webbläsare stöder det fullständigt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd