Is one of these more preferable than the other? Why? How about performance--if these are being called thousands of times?

A) element.setAttribute("disabled", true);
B) element.disabled = true;

They both seem to disable an input[text] element in FF 4.

Is one of these more preferable than the other? Why? How about performance--if these are being called thousands of times?

A) element.setAttribute("disabled", true);
B) element.disabled = true;

They both seem to disable an input[text] element in FF 4.

• javascript
• dom

• 1 B is certainly more idiomatic. The W3C came along and made the DOM APIs look like Java. >.< – davidchambers Commented Nov 5, 2011 at 7:40
• 1 @davidchambers: You prefer some weird getter/setter magic in the background? – thejh Commented Nov 5, 2011 at 7:43
• 1 possible duplicate of JavaScript setAttribute vs .attribute= – Felix Kling Commented Nov 5, 2011 at 10:10

5 Answers 5

In general…

Use properties. For a long time (until version 7 or 8 IIRC) Internet Explorer had a seriously broken implementation of setAttribute that would set the property not the attribute (the classic point of failure was class since there is no class property (it is className).

In this case in particular… element.setAttribute("disabled", true); is wrong. It should be element.setAttribute("disabled", "disabled");

element.setAttribute("disabled", some_bool) doesn't work like you'd think it will. In particular, standardswise, disabled is what's known as a boolean attribute; its very presence, regardless of its value, makes it true. disabled="", disabled="disabled", disabled="true" and even disabled="false"(!!!) all mean the same thing in most browsers. (Although the last two are actually invalid HTML, most browsers will consider them equivalent to disabled="disabled" for truth purposes. Including every one of the Big Four.) You set a boolean attribute to true by setting a value -- any value, even if it's falsy -- and you set it to false by removing the attribute entirely.

If you care about the actual string value of the attribute (which in this case you shouldn't), and particularly if the attribute isn't already exposed via the DOM (that is, it doesn't have a corresponding property), then use (get/set)Attribute. In most cases (particularly if you care about how it affects the element, like in this case where you're trying to disable an element), use the DOM property.

They are two different ways to set an attribute. Each has their own pros and cons.

1. Property deals with the data type directly, while setAttribute always interacts with strings (Note your example isn't correct):

element.setAttribute("disabled", "disabled");
element.disabled = true;

2. setAttribute uses the attribute name as is, but property requires a bit variation, which must be looked up individually. For example:

element.setAttribute("class", "my-class");
element.className = "my-class";

3. setAttribute uses custom attribute names (i.e., those starting with data-) as is, but property puts them in a dataset property:

element.setAttribute("data-my-custom-attr", "abc");
element.dataset.myCustomAttr = "abc";

4. setAttribute may accidentally add an invalid attribute, but property won't:

element.setAttribute("invalidname", "blah");  // "invalidname"="blah" is added
element.invalidname = "blah";  // doesn't change any attribute

I would say, unless 2 is important, property is a better way.

(Shortened and adapted from this section of this article)

IE needs some attributes to be set with setAttribute, but not all. I don't have a list though, you just have to check if it works or not. Also, using setAttribute will put the attribute in the DOM, so it can be shown when doing view source.

Only one tip: element.setAttribute('class',xxx) doesnt works in some versions of IE.

Prefer element.className = xxx instead