如何使用 JavaScript 添加布尔属性

Question

如何使用 JavaScript 添加布尔属性？例如，如何将

更改为

更改为

Answer 1

添加布尔属性：

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

注意第二个参数为空字符串！

使用 node.removeAttribute(attributeName) 删除其他人提到的属性。

Answer 2

一般来说，您可以使用 element.setAttribute('attributeName', 'value') 或 element.propertyName = value 来切换元素的属性或特性。

布尔属性

对于布尔属性，请设置具有相同名称值的属性：

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

删除布尔属性的工作方式与其他属性相同：

element.removeAttribute('disabled');

但是，您的两个示例都不是 布尔属性！

contenteditable

contenteditable 不是布尔属性，而是枚举属性。其可能的值为空字符串、"true" 和 "false"。

虽然在这种情况下 setAttribute 似乎有些过分，但您可以使用它：

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

contenteditable 属性的属性名称是 contentEditable （注意大写的 E），并且它识别值 'true'、'false' 和 'inherit' — 因此您可以使用：

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

请注意 'true' 和 'false' 这里是字符串，而不是布尔值。

data-example

对于 data-example 属性，您可以使用：

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

或者，在支持 dataset 的浏览器中（请参阅以浅绿色突出显示的内容）在 http://caniuse.com/dataset 上，您可以使用：

element.dataset.example = 'some value';

Answer 3

设置属性

使用 element.setAttribute：https://developer .mozilla.org/en/DOM/element.setAttribute

如果你像这样添加一个id：

<p id="p1">

你可以像这样选择元素：

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

设置一个布尔属性

根据W3C HTML4 规范：

布尔属性可以合法地采用单个值：属性本身的名称

因此您可以像这样添加属性：

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

设置 contentEditable

根据 W3C HTML5 规范，属性 < code>contentEditable 可以有值 true、false 和 inherit。那么你就必须做这样的事情：

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

说实话，我也不确定哪一个最适合你的情况。

Answer 4

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

或清除：

element.removeAttribute('contenteditable')

Answer 5

使用 element.dataset.example 修改 data-example 属性的值。

Answer 6

引自 MDN：

如果布尔属性出现在
根本没有元素，无论其实际价值如何；一般来说，你
应该在值中指定空字符串（“”）（有些人使用
属性的名称；这可以工作，但不是标准的）。

来源： https://developer .mozilla.org/en-US/docs/Web/API/Element/setAttribute