如何使用 JavaScript 添加布尔属性

Posted 2023-03-07

【中文标题】如何使用 JavaScript 添加布尔属性

【英文标题】：How to add boolean attribute using JavaScript

【发布时间】：2012-03-01 08:51:50

【问题描述】：

？例如，如何改变：

<p> 到 <p contenteditable>

<p> 到 <p data-example>

【问题讨论】：

这些是 html 属性。它们本质上是否是布尔值并不重要。对于 contenteditable，您可以将其视为标准 HTML 属性/值对 contenteditable="true"

@DA 如果您想使用 IDL 属性而不是通过 setAttribute() 设置它们，这很重要。例如，selected 布尔属性可以接收布尔值true 或false，而属性值应为selected（selected="selected"）或空字符串（selected 或selected="" )。

@DA 在规范中它们被称为布尔属性w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

contenteditable 不是布尔属性。看我的回答：***.com/a/9201499/96656

感谢您的澄清！是的，我错了。真正的布尔变量只能有自己的值。我想我得到的是，无论它是否是布尔值，您都可以像对待任何其他 html 实体一样对待它，因为它可以有一个值。也就是说，我不知道 IDL 是什么，所以它很可能是完全不同的东西。

【参考方案1】：

设置属性

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

如果您像这样添加id：

<p id="p1">

你可以像这样选择元素：

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

设置布尔属性

根据W3C HTML4 specification：

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

所以你可以像这样添加你的属性：

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

设置 contentEditable

根据W3C HTML5 specification，属性contentEditable可以有值true、false和inherit。然后你必须做这样的事情：

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

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

【讨论】：

这使得 <p id="p1" contenteditable="true"> 与 <p id="p1" contenteditable> 不同

@ryanve 是一样的。 contenteditable 不是布尔属性。请参阅我的回答：***.com/a/9201499/96656@TheNail 您可能想要恢复该编辑，因为这与布尔属性无关。

答案是否有合并功能？ :D

【参考方案2】：

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

或清除：

element.removeAttribute('contenteditable')

【参考方案3】：

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

布尔属性

对于布尔属性，将属性设置为同名值：

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

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

element.removeAttribute('disabled');

但是，你的两个例子都不是boolean attributes！

contenteditable

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

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

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

contenteditable 属性的属性名称是contentEditable（注意大写E）和it recognizes the values'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';

【讨论】：

啊是的枚举:] 在 javascript 中比较一个空字符串 "" === elem.getAttribute('contenteditable') 是 true。但是，如果您将其与任何其他值进行比较，则为false。在 contenteditable 的浏览器中，“空字符串和 true 关键字映射到真实状态”w3.org/TR/html5/editing.html#contenteditable

@ryanve 当然可以； '' == '' 在 JavaScript 中，所以如果你使用 <p contenteditable> 或 <p contenteditable="">，p.getAttribute('contenteditable') == ''。

这不能回答问题。

@kleinfreund 这是不正确的。 根据定义，自定义属性不能是boolean attributes！ 您可以有点将自定义属性视为布尔值，但它的行为仍与真正的布尔属性不同.

@kleinfreund 一个示例布尔属性是hidden。 <p hidden> 或 <p hidden=""> 或 <p hidden="hidden"> 都是等价的。任何未在规范中定义为布尔属性的属性（包括自定义属性）都不会神奇地获得该行为。对于自定义属性，您必须自己实现类似的东西，但它仍然不是真正的布尔属性，因为它不会通过浏览器中的相同管道。

【参考方案4】：

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

【讨论】：

我认为等效于您将其设置为空字符串。 element.dataset.example = ""见***.com/questions/9200712/…

【参考方案5】：

添加布尔属性：

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

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

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

【讨论】：

这是唯一一个真正直接响应如何设置非反射布尔属性的问题的答案。

正确答案。

【参考方案6】：

如果布尔属性存在于元素上，则认为它们为真，而不管它们的实际值如何；通常，您应该在 value 中指定空字符串 ("")（有些人使用属性的名称；这可行但不标准）。

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