ThesetAttribute() method of theElement interface sets the value of an attribute on the specified element.If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

If you need to work with theAttr node (such as cloning from another element) before adding it, you can use thesetAttributeNode() method instead.

Syntax

setAttribute(name, value)

Parameters

name

A string specifying the name of the attribute whose value is to be set.The attribute name is automatically converted to all lower-case whensetAttribute() is called on an HTML element in an HTML document.

value

A trusted type or string containing the value to assign to the attribute.

Trusted type instances must be passed for the following attributes when trusted types are enforced:

• Event handler content attributes, such asonclick andonload, require aTrustedScript.
• HTMLIFrameElement.srcdoc require aTrustedHTML instance.
• HTMLScriptElement.src require aTrustedScriptURL instance.
• SVGScriptElement.href require aTrustedScriptURL instance.

Trusted types are not enforced for other attributes, so a string or any trusted type may be passed.

A specified non-string value specified is converted automatically into a string.

Boolean attributes are considered to betrue if they're present on the element at all.You should setvalue to the empty string ("") or the attribute's name, with no leading or trailing whitespace.See theexample below for a practical demonstration.

Return value

None (undefined).

Exceptions

InvalidCharacterErrorDOMException

Thrown if thename value is not a validXML name.For example, if it starts with a number, a hyphen, or a period, or contains characters other than alphanumeric characters, underscores, hyphens, or periods.

TypeError

Thrown ifvalue is passed a string instead of a trusted type object (for those attributes that require them) whenTrusted Types areenforced by a CSP and no default policy is defined.

Description

setAttribute() sets the value of an attribute on the specified element.If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

To set the value of a Boolean attribute, such asdisabled, you can specify any value.It doesn't matter what value you use; if the attribute is present, its value is considered to betrue.By convention we enable boolean attributes by setting their value to either the name of the attribute or the empty string ("").The absence of a boolean attribute means its value isfalse; you must callElement.removeAttribute() to "undo" the effect of enabling a boolean attribute

To get the current value of an attribute, usegetAttribute(); to remove an attribute, callremoveAttribute().

Security considerations

Some attributes can be used as a vector forcross-site scripting (XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized, or scripts are run that might contain malicious code.

For example, the following code shows how a potentially untrusted string provided by a user would be executed when the button is pressed.

const button = document.querySelector("button");const potentiallyUnsafeString = "alert(1)";button.setAttribute("onclick", potentiallyUnsafeString);

You might similarly inject untrusted HTML into the DOM by setting theHTMLIFrameElement.srcdoc attribute, or by supplying an untrusted URL to theHTMLScriptElement.src orSVGScriptElement.href attributes.

You can mitigate these issues by always assigning the appropriate trusted type object (TrustedHTML,TrustedScript, orTrustedScriptURL) for each property instead of strings, andenforcing trusted types using therequire-trusted-types-for CSP directive.This ensures that the input is passed through a transformation function which might, for example, remove potentially dangerous markup from HTML before it is injected.

Examples

Setting safe attributes

This example usessetAttribute() to set thename anddisabled attributes on a<button>.These attributes are both XSS-safe.Since their values are not executed or parsed as HTML into the DOM, we don't need to pass trusted types.

HTML

<div>  <button type="button">Reset</button>  <button>Toggle</button></div><button>Some Text</button>

button {  height: 30px;  width: 100px;  margin: 1em;}

JavaScript

First we get the button element and set itsname attribute to "helloButton" usingsetAttribute().To demonstrate that the attribute name did change, we then get the attribute text and display it on the button.

const helloButton = document.querySelector("#hello_button");helloButton.setAttribute("name", "helloButton");// Set button text to name to show the attribute changedhelloButton.innerText = helloButton.getAttribute("name");

This code is for the reset button.It simply reloads the frame.

const reloadButton = document.querySelector("#reset");reloadButton.addEventListener("click", () => document.location.reload());

Next we show how to set and reset a boolean attribute.When the toggle button is clicked we check if the booleandisabled property is defined (this property reflects thedisabled attribute, and istrue if the button is disabled andfalse otherwise).If the button is disabled we callElement.removeAttribute() to remove the attribute, which in turn enables the button.If the button is enabled, we disable the button by setting thedisabled attribute to"disabled".

const toggleDisabledButton = document.querySelector("#toggle_disabled");toggleDisabledButton.addEventListener("click", () => {  if (helloButton.disabled) {    // Button is disabled. Enable by removing attribute    helloButton.removeAttribute("disabled");  } else {    // Button enabled. Disable by setting value to anything    // (normally "" or "disabled")    helloButton.setAttribute("disabled", "disabled");  }});

Results

The running example is shown below.You can see that the bottom button text is "helloButton", as we've set the name property and then it used it to set the button text.You can press the "Toggle" button to disable and enable the "helloButton".

Setting unsafe attributes

In this example we'll show how you might mitigate the risks of callingsetAttributes() to set thesrcdoc attribute on an<iframe>.This attribute sets the source HTML of a frame, and can hence inject potentially untrusted or unsafe code into the DOM.

The approach would be similar for settingsrc on HTML script elements,href on SVG script elements, and theonXxxx event handler attributes: the main difference is that you pass them different trusted type objects.

Trusted types are not yet supported on all browsers, so first we define thetrusted types tinyfill.This acts as a transparent replacement for the Trusted Types JavaScript API:

if (typeof trustedTypes === "undefined")  trustedTypes = { createPolicy: (n, rules) => rules };

Next we create aTrustedTypePolicy that defines acreateHTML() for transforming an input string intoTrustedHTML instances.Commonly, implementations ofcreateHTML() use a library such asDOMPurify to sanitize the input, as shown below:

const policy = trustedTypes.createPolicy("my-policy", {  createHTML: (input) => DOMPurify.sanitize(input),});

Then we use thispolicy object to create aTrustedHTML object from the potentially unsafe input string, and assign the result to the element:

// The potentially malicious stringconst untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";// Create a TrustedHTML instance using the policyconst trustedHTML = policy.createHTML(untrustedString);// Inject the TrustedHTML (which contains a trusted string)const iframeElement = document.querySelector("#an_iframe");iframeElement.setAttribute("srcdoc", trustedHTML);

Specifications

Browser compatibility

See also

• Element.hasAttribute()
• Element.getAttribute()
• Element.removeAttribute()
• Element.toggleAttribute()