Element.setAttribute

  • Revision slug: Web/API/element.setAttribute
  • Revision title: element.setAttribute
  • Revision id: 406529
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From DOM/element.setAttribute to Web/API/element.setAttribute

Revision Content

{{DomRef}}

Summary

Adds a new attribute or changes the value of an existing attribute on the specified element.

Syntax

element.setAttribute(name, value);
  • name is the name of the attribute as a string.
  • value is the desired new value of the attribute.

Example

var d = document.getElementById("d1"); 

d.setAttribute("align", "center");

Notes

When called on an HTML element in an HTML document, setAttribute lower-cases its attribute name argument.

If the specified attribute already exists, then the value of that attribute is changed to the value passed to this function. If it does not exist, then the attribute is created.

Even though getAttribute() returns null for missing attributes, you should use removeAttribute() instead of elt.setAttribute(attr, null) to remove the attribute.

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val).

{{DOMAttributeMethods}}

Specification

Revision Source

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Adds a new attribute or changes the value of an existing attribute on the specified element.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
</pre>
<ul>
  <li><code>name</code> is the name of the attribute as a string.</li>
  <li><code>value</code> is the desired new value of the attribute.</li>
</ul>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush:js">
var d = document.getElementById("d1"); 

d.setAttribute("align", "center");
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>When called on an HTML element in an HTML document, <code>setAttribute</code> lower-cases its attribute name argument.</p>
<p>If the specified attribute already exists, then the value of that attribute is changed to the value passed to this function. If it does not exist, then the attribute is created.</p>
<p>Even though <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> returns <code>null</code> for missing attributes, you should use <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> instead of <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> to remove the attribute.</p>
<p>Using <code>setAttribute()</code> to modify certain attributes, most notably <code>value</code> in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use <code><em>elt</em>.value</code> instead of <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p>
<div>
  {{DOMAttributeMethods}}</div>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
  <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
</ul>
Revert to this revision