Often, we see HTML code snippets that set an attribute of an element without any value, like the following:

<button id="my-button" disabled>I'm a button</button>

In the HTML code snippet above, the id attribute has a value of "my-button", while the disabled attribute is present without any specified value. Many of us may wonder: How can I add such an attribute without a value like disabled above in JavaScript? The answer is probably trickier than most of us may have thought: This is impossible, and you may have been misled by the appearance of the HTML code.

For the impatient, feel free to jump to the conclusion.

An Attribute Always Has a Value

According to the HTML standard defined by WHATWG,

Attributes have a name and a value… Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

So attributes always have a value. But would this contradict the above HTML code snippet, which does not specify a value of the disabled attribute? The standard further states:

Attributes can be specified in four different ways:

Empty attribute syntax

Just the attribute name. The value is implicitly the empty string.

Therefore, the above HTML code is a shortened form of

<button id="my-button" disabled="">I'm a button</button>

Hence, setting the disabled attribute to an empty string from JavaScript would achieve the effect of the HTML code snippet at the beginning of the article:

document.getElementById("my-button").setAttribute("disabled", "");
// OR
document.getElementById("my-button").toggleAttribute("disabled", true);

Consistency with getAttribute and setAttribute

The behaviors of getAttribute and setAttribute are consistent with the requirement that each attribute must have a value.

getAttribute

According to the MDN Web Docs, getAttribute always returns a string unless the attribute does not exist. With a little experiment, loading the HTML code snippet at the beginning of the article in a browser (including Chrome and Firefox), document.getElementById('my-button').getAttribute('disabled') returns an empty string.

setAttribute

Similarly, according to the MDN Web Docs, setAttribute allows us to set the value of an attribute. If the attribute does not exist, it adds the attribute. However, setAttribute requires a value to be specified. Regarding a Boolean attribute like disabled, MDN Web Docs says:

Boolean attributes are considered to be true if they’re present on the element at all. You should set value to the empty string ("") or the attribute’s name, with no leading or trailing whitespace.

Therefore, setAttribute("disabled", "") is equivalent to the HTML code snippet at the beginning of the article.

But I See Attributes Without a Value in Chrome’s Element Inspector!

Probably because Chrome’s element inspector displays the element in a way that complies with the HTML standard quoted above. Interestingly, if you try Firefox’s element inspector, it always displays the empty string "" even if the HTML code only contains the attribute name without a value.

Conclusion

  • An attribute must always have a value.
  • If an attribute is specified without a value, its value is an empty string.
  • setAttribute("disabled", "") or toggleAttribute("disabled", true) are equivalent to the HTML code snippet at the beginning of the article.
  • This behavior is consistent with those of getAttribute and setAttribute.
  • If an attribute has a value of an empty string, Chrome’s element inspector always displays the attribute without its value, while Firefox’s element inspector always displays it with its empty string value.
Ad
Digital Ocean Hosting $200 Credit Free Trial