Arguments

name (DOMString) required

The name of the attribute to create or alter.

value (DOMString) required

The string value for the attribute.

Description

Set a new attribute with the specified name and value to this element.

If an attribute already exists with the specified name, its value is replaced.

When setting a value, the value is not parsed, so any entity references or other markup will be treated as literal text. To create an attribute containing entities the specification suggests to create an Attr node with appropriate Text and EntityReference nodes as children, then add it to an element using setAttributeNode, however in practise this rarely works (see Attr for details).

This method is for working with non-namespaced attributes; to add a namespaced attribute, use the DOM 2 setAttributeNS method instead.

Compatibility

Opera 9.0 in pure XML (but not XHTML mode¹) parses entities in values passed to this method.

In Internet Explorer in HTML, attribute values are mapped to HTML DOM properties rather than literal attributes (as they are with getAttribute and removeAttribute), so many attributes can only be set by this method using the camel-cased name they use for their DOM property equivalent. The most common examples of this are className for a class attribute, and htmlFor for a for attribute; other examples are tabIndex, accessKey and useMap, and all table-specific attribute properties like colSpan and rowSpan.

Additionally, IE in HTML cannot set the type attribute of an input element — attempting to do so will throw an error (This command is not supported). It also can’t set the style attribute (doing so simply has no effect), and cannot set event-handling attributes as strings (to do so has no effect, unless that element already has an event-handling attribute of the same name, in which the case the operation to set a new one will remove the old one, leaving nothing — although getAttribute will subsequently return the string value that was set, there won't actually be an active event handler on the element). IE can, however, set event-handling attributes if a function is passed as the value argument, rather than a string:

element.setAttribute('onclick', function() { alert("this works!"); });

Finally, if this method is used to set the src attribute of an image, the value that's subsequently returned from getAttribute will be a fully qualified URI; this is the same as its behavior when retrieving an src that's been set in static HTML. However when setting the href of a link, the value that's subsequently returned will be the literal value that was set; this is different from its behavior with static HTML in which the value is returned as a qualified URI.

In all browsers an attribute which evaluates to a boolean (such as disabled) can only be set to true — setting it to false has no effect. This is correct behavior, and is because such attributes should only have one possible value (ie. disabled="disabled"), or are not defined (so negating them should be done with removeAttribute). In Opera 9.5, Firefox and Safari the attribute value will subsequently return as false but the element will still be disabled, in Opera 9.0 the value will continue to return as disabled, and in Internet Explorer the value will continue to return as boolean true; these are accurate reflections of the state of the element, even if they are a little confusing! However since IE considers these attributes to have an actual boolean value, the value can be toggled (and the element disabled and enabled accordingly) by setting it as a boolean rather than a string:

element.setAttribute('disabled', false);

Internet Explorer implements a second argument to setAttribute, which is a case-sensitivity flag that can take the value 0 (case-insensitive) or 1 (default, case-sensitive). This argument works as expected in IE, and does not affect any other browser.