How to add boolean attribute using JavaScript

Question

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

<p> to <p contenteditable>

<p> to <p data-example>

Answer 1

In general, you can use element.setAttribute('attributeName', 'value') or element.propertyName = value to switch the attributes or properties of the elements.

Logical attributes

For boolean attributes, set the attribute with the same name:

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

Removing the boolean attribute works the same as other attributes:

 element.removeAttribute('disabled'); 

However, none of your two examples are logical attributes !

contenteditable

contenteditable not a boolean attribute, its enumerated attribute. Its possible values ​​are empty string, "true" and "false" .

While setAttribute seems redundant in this case, you can use it:

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

The property name for the attribute is contenteditable contenteditable (note the capital E ), but recognizes the values 'true' , 'false' and 'inherit' - so you can simply 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 can use:

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

Or, in browsers that support dataset (see those highlighted in green at http://caniuse.com/dataset ), you can use:

 element.dataset.example = 'some value'; 

Answer 2

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 the attribute as indicated by others.

Answer 3

To set an attribute

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

If you add id like this:

 <p id="p1"> 

You can select an item as follows:

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

To set a boolean attribute

According to the HTML3 W3C specification :

Logical attributes can legally take one value: the name of the attribute itself

so that you can add your attribute as follows:

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

To set contentEditable

According to the HTML3 W3C specification, the contentEditable attribute can be true , false and inherit . Then you will need to do something like this:

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

Honestly, I'm also not sure which one is better in your situation.

Answer 4

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

Answer 5

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

or clear:

 element.removeAttribute('contenteditable')