为什么将“禁用”属性设置为 false 也会删除“禁用”属性？

Question

我有一个最初被禁用的按钮：

<button disabled="disabled">Lorem ipsum</button>

对于此按钮，button.getAttribute('disabled') 返回"disabled"。但是，当我使用 JavaScript 启用此按钮时：

button.disabled = false;

然后button.getAttribute('disabled') 开始返回null。

现场演示： http://jsfiddle.net/Rhj3c/1/

这是为什么呢？ .getAttribute() 不应该从原始 HTML 源代码返回值吗？然后如何确定该按钮是否在原始 HTML 源代码中被禁用？

Answer 1

disabled 属性是一个Boolean 属性，如果存在，它指定元素应该被禁用，如果不存在则它被启用，它可以用作：

<!-- Disabled -->
<button disabled>Lorem ipsum</button>

它可以用作property (Example)：

var button = document.querySelector('button');
console.log(button.disabled); // true if present, false if not

// Or this
console.log(button.hasAttribute('disabled')); // true if present false if not

更新（Example）：

var input = document.querySelector('input');
input.value = 'Dynamic value';
console.log(input.getAttribute('value')); // "Initial value" attribute is in source
console.log(input.value); // "Dynamic value" property is in ram, rendered on the screen

使用input.value你设置属性在ram而不是source，你需要使用setAttribute来改变source，是你要求的吗？

Answer 2

.getAttribute() 不应该返回原始 HTML 源代码中的值吗？

不，根据the specification（强调我的）：

如果反射 IDL 属性是 boolean 属性，则在获取 IDL 属性时，如果设置了内容属性，则必须返回 true，如果不存在则返回 false。设置时，如果 IDL 属性设置为 false，则必须删除 content 属性，如果 IDL 属性设置为 true，则必须将其设置为空字符串。 （这对应于boolean content attributes的规则。）

然后如何确定该按钮是否在原始 HTML 源代码中被禁用？

在它改变之前检查它。如果问题真的仅限于“原始 HTML 源代码”而不是“元素最初是什么”（例如，如果它是用 JavaScript 创建的），那可能只是：

var originallyDisabled = Array.prototype.slice.call(
    document.querySelectorAll('[disabled]')
);
⋮
if (originallyDisabled.indexOf(button) !== -1) {
    …
}