How to add boolean attribute using JavaScript

Question

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

 to 

 to 

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.
– DA., Commented Feb 8, 2012 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
– Mathias Bynens, Commented Feb 8, 2012 at 21:21
@DA In the spec they're referred to as boolean attributes w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 — ryanve
– ryanve, Commented Feb 8, 2012 at 21:23
contenteditable is not a boolean attribute. See my answer: stackoverflow.com/a/9201499/96656 — Mathias Bynens
– Mathias Bynens, Commented Feb 8, 2012 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.
– DA., Commented Feb 8, 2012 at 22:56

Thoran · Accepted Answer · 2016-06-27 15:19:17Z

49

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.

answered Jun 27, 2016 at 15:19

Thoran

9,6288 gold badges46 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tomturton Over a year ago

This is the only answer that actually directly responds to the question of how to set a non-reflected boolean attribute.

user670839 Over a year ago

Correct answer.

Mathias Bynens · Accepted Answer · 2017-08-30 07:57:58Z

26

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';

edited Aug 30, 2017 at 7:57

answered Feb 8, 2012 at 21:12

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

10 Comments

ryanve Over a year ago

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" w3.org/TR/html5/editing.html#contenteditable

Mathias Bynens Over a year ago

@ryanve Well of course; '' == '' in JavaScript, so if you use  or , p.getAttribute('contenteditable') == ''.

user2036825 Over a year ago

This does not answer the question.

Mathias Bynens Over a year ago

@kleinfreund That’s incorrect. Custom attributes cannot be 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 Over a year ago

@kleinfreund An example boolean attribute is hidden.  or  or  are all equivalent. Any attribute that is not defined as a boolean attribute in the spec (including custom attributes) does not magically get that behavior. For custom attributes you’d have to implement something like it yourself, and still it wouldn’t be a real boolean property as it wouldn’t go through the same pipeline in the browser.

|

The Nail · Accepted Answer · 2012-02-09 07:49:05Z

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.

edited Feb 9, 2012 at 7:49

answered Feb 8, 2012 at 21:12

The Nail

8,5202 gold badges38 silver badges50 bronze badges

3 Comments

ryanve Over a year ago

That makes it  which is not the same as 

Mathias Bynens Over a year ago

@ryanve It is the same. contenteditable is not a boolean attribute. See my answer: stackoverflow.com/a/9201499/96656 @TheNail You may want to revert that edit, as this has nothing to do with boolean attributes.

The Nail Over a year ago

Is there a merge function for answers? :D

Diodeus - James MacFarlane · Accepted Answer · 2012-02-08 21:12:50Z

2

element.setAttribute('contenteditable','contenteditable')

or to clear:

element.removeAttribute('contenteditable')

answered Feb 8, 2012 at 21:12

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

caleb · Accepted Answer · 2012-02-08 21:13:00Z

1

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

answered Feb 8, 2012 at 21:13

caleb

1,63713 silver badges12 bronze badges

1 Comment

ryanve Over a year ago

I think to be equivalent you'd set it to an empty string. element.dataset.example = "" See stackoverflow.com/questions/9200712/…

Lonnie Best · Accepted Answer · 2022-10-20 02:11:04Z

-1

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

edited Oct 20, 2022 at 2:11

answered Oct 10, 2018 at 9:52

Lonnie Best

11.6k15 gold badges69 silver badges113 bronze badges

Collectives™ on Stack Overflow

How to add boolean attribute using JavaScript

6 Answers 6

To add a Boolean attribute:

2 Comments

Boolean attributes

`contenteditable`

`data-example`

10 Comments

To set an attribute

To set a Boolean attribute

To set contentEditable

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

To add a Boolean attribute:

2 Comments

Boolean attributes

contenteditable

data-example

10 Comments

To set an attribute

To set a Boolean attribute

To set contentEditable

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`contenteditable`

`data-example`