没有名称验证的 setAttribute答案

【问题标题】：setAttribute without name validation没有名称验证的 setAttribute
【发布时间】：2017-07-12 09:46:56
【问题描述】：

我需要为 JS 中的 HTML 元素添加属性。我正在使用 setAttribute，但是我需要添加属性 [foo] - 这是无效的属性名称 - 在我的情况下它很好，因为稍后在处理无论如何属性被转换为有效值 foo

问题是 setAttribute 抛出错误，说它是无效的名称。

有什么方法可以在不验证名称的情况下添加属性？

代码：


// el is HTMLInputElement

el.setAttribute("[foo]", "test");

// error - Failed to execute 'setAttribute' on 'Element': '[foo]' is not a valid attribute name.

它在 Chrome v59 中

用笔复制它：https://codepen.io/kheim/pen/OgrZwj

谢谢！

【问题讨论】：

请在此处添加您的代码
它不应该抛出错误。你给你的属性赋值了吗？
你在使用 angularJs
这很有趣。据我所知，根据the HTML5 spec，[foo] 实际上是一个有效的属性名称，但我没有可用的浏览器愿意接受它。

标签： javascript html dom

【解决方案1】：

您在使用setAttribute 时不需要[]。

你的 JS 应该是：

// el is HTMLInputElement

ele.setAttribute("foo", "test");

【讨论】：

但我需要添加括号 - 这是我的逻辑所要求的。
@user1038334 到目前为止，更改逻辑是更好的选择。
不可能，这就像添加动态属性以由角度选择（不是实际情况 - 但非常相似）
你不能使用自定义data-*属性吗？浏览器会将带有[] 的属性呈现为无效的 HTML。
浏览器永远不会渲染它，在它被添加到来自 [] 的条中的显示属性之前。