custom属性仅适用于element.getAttribute（“attribute”）但不适用于“element.attribute”

Question

我刚刚注意到，如果我为html元素提供自定义属性，例如：

<input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" />

然后我可以像这样检索它：

document.getElementById("my_button").getAttribute("custom_attr");

它将返回"custom_attr_text"，但如果我这样做

document.getElementById("my_button").custom_attr;

然后它返回undefined！

我还注意到，使用内置属性（例如value或id）以上两种方法都可以正常工作！ 有人可以解释为什么会这样吗？

Answer 1

只有某些标准属性直接映射到属性。这不是非标准（自定义）属性的已定义行为。

使用自定义属性的向前兼容方式是在其前面添加data-。

<input ... data-custom_attr="custom_attr_text" ... />

然后，它们在HTML5兼容的浏览器中可用：

element.dataset.custom_attr

但在旧版浏览器中，您仍需要使用.getAttribute()。