31

How do you add boolean attributes using JavaScript? For example, how can you change:

<p> to <p contenteditable>

<p> to <p data-example>

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
ryanve
  • 50,076
  • 30
  • 102
  • 137
  • Those are HTML attributes. Whether they are boolean in nature doesn't really mater. For contenteditable, you can treat it as a standard HTML attribute/value pair `contenteditable="true"` – DA. Feb 08 '12 at 21:13
  • @DA It does matter if you want to set them using the IDL property rather than through `setAttribute()`. For example, the `selected` boolean property, can receive the boolean values `true` or `false`, while the attribute value should either be `selected` (`selected="selected"`) or the empty string (`selected` or `selected=""`). – Mathias Bynens Feb 08 '12 at 21:21
  • 1
    @DA In the spec they're referred to as boolean attributes http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 – ryanve Feb 08 '12 at 21:23
  • 1
    `contenteditable` is not a boolean attribute. See my answer: http://stackoverflow.com/a/9201499/96656 – Mathias Bynens Feb 08 '12 at 21:35
  • Thanks for the clarifications! Yes, I was incorrect. A true boolean variable can only have a value of itself. I guess what I was getting at is that regardless of whether or not it's boolean, you can treat it like any other html entity in that it can have a value. That said, I'm not up on what IDL is so that could very well be something entirely different. – DA. Feb 08 '12 at 22:56

6 Answers6

44

To add a Boolean attribute:

node.setAttribute(attributeName, '');
// example:
document.body.setAttribute('hidden', '');

Note the empty string as the second argument!

Use node.removeAttribute(attributeName) to remove an attribute as mentioned by others.

Thoran
  • 8,884
  • 7
  • 41
  • 50
24

In general, you can use element.setAttribute('attributeName', 'value') or element.propertyName = value to toggle an element’s attributes or properties.

Boolean attributes

For boolean attributes, set the attribute with the same-named value:

element.setAttribute('disabled', 'disabled');

Removing a boolean attribute works the same way as other attributes:

element.removeAttribute('disabled');

However, neither of your two examples are boolean attributes!

contenteditable

contenteditable is not a boolean attribute, it’s an enumerated attribute. Its possible values are the empty string, "true", and "false".

While setAttribute seems overkill in this case, you could use it:

element.setAttribute('contenteditable', 'true');
// to undo:
element.removeAttribute('contenteditable');

The property name for the contenteditable attribute is contentEditable (note the capital E), and it recognizes the values 'true', 'false', and 'inherit' — so you could just use:

element.contentEditable = 'true';
// to undo:
element.contentEditable = 'false';

Note that 'true' and 'false' are strings here, not booleans.

data-example

For the data-example attribute, you could use:

element.setAttribute('data-example', 'some value'); // the value should be a string
// to undo:
element.removeAttribute('data-example');

Or, in browsers who support dataset (see the ones highlighted in light green on http://caniuse.com/dataset), you could use:

element.dataset.example = 'some value';
Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • Ah yea enumerated :] Comparing an empty string `"" === elem.getAttribute('contenteditable')` is `true` in JavaScript. But if you compare it to any of those other values it's `false`. In the browser for contenteditable both "the empty string and the true keyword map to the true state" http://www.w3.org/TR/html5/editing.html#contenteditable – ryanve Feb 08 '12 at 21:49
  • @ryanve Well of course; `'' == ''` in JavaScript, so if you use `

    ` or `

    `, `p.getAttribute('contenteditable') == ''`.

     – Mathias Bynens Feb 08 '12 at 21:54
  • This does not answer the question. – kleinfreund Aug 17 '17 at 07:57
  • @kleinfreund Depends on which question you’re referring to. OP’s example (which doesn’t have any boolean attributes in it!) makes it clear that they didn’t actually mean to ask the question from the title. Answering it doesn’t help their case. I answered the question that solves OP’s problem. – Mathias Bynens Aug 30 '17 at 07:54
  • @MathiasBynens I don’t agree with the assertion that the question doesn’t contain boolean attributes. The definition/usage of `data-example` is unknown and may be a boolean attribute. You do not provide an answer to the question raised via the title or the body of the question. You could’ve provided a direct answer plus your current answer based on assumption. – kleinfreund Aug 30 '17 at 08:59
  • @MathiasBynens Your answer is still valuable and raises some important, easy to miss aspects the OP or other readers might not have considered. – kleinfreund Aug 30 '17 at 09:03
  • 1
    @kleinfreund That’s incorrect. **Custom attributes cannot be [boolean attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes), by definition!** You could _kind of_ treat a custom attribute as if it was boolean, but it would still behave differently than a real boolean attribute. – Mathias Bynens Aug 31 '17 at 12:12
  • @MathiasBynens I don’t see where on that page it is implied that custom attributes cannot be boolean. I can’t find a source for that in the spec. (In the third example [here](https://html.spec.whatwg.org/multipage/dom.html#custom-data-attribute), there is a custom attribute used effectively like a boolean.) Is your point that the interfaces for custom attributes don’t provide the means of interacting with them like they were boolean attributes? – kleinfreund Sep 01 '17 at 07:06
  • 1
    @kleinfreund An example boolean attribute is `hidden`. ` – Mathias Bynens Sep 01 '17 at 17:05
  • @MathiasBynens I think that's helpful information to add to your answer in order to understand your intentions. – kleinfreund Sep 02 '17 at 09:45
4

To set an attribute

Use element.setAttribute: https://developer.mozilla.org/en/DOM/element.setAttribute

If you add an id like this:

<p id="p1">

you can select the element like this:

var p1 = document.getElementById("p1");

To set a Boolean attribute

According to the W3C HTML4 specification:

Boolean attributes may legally take a single value: the name of the attribute itself

so you can add your attribute like this:

p1.setAttribute("contenteditable", "contenteditable");

To set contentEditable

According to the W3C HTML5 specification, the attribute contentEditable can have values true, false and inherit. Then you would have to do something like this:

p1.setAttribute("contenteditable", "true");

To be honest, I am also not sure which one is best in your situation.

The Nail
  • 8,355
  • 2
  • 35
  • 48
2
element.setAttribute('contenteditable','contenteditable')

or to clear:

element.removeAttribute('contenteditable')
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

Use element.dataset.example to modify the value of the data-example attribute.

caleb
  • 1,579
  • 12
  • 12
  • I think to be equivalent you'd set it to an empty string. `element.dataset.example = ""` See http://stackoverflow.com/questions/9200712/proper-implementation-of-html5-dataset – ryanve Feb 08 '12 at 21:52
-2

Quoted from MDN:

Boolean attributes are considered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (some people use the attribute's name; this works but is non-standard).

source: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Lonnie Best
  • 9,936
  • 10
  • 57
  • 97