你能定义你自己的 HTML 元素属性吗？答案

【问题标题】：Can you define your own HTML element attributes?你能定义你自己的 HTML 元素属性吗？
【发布时间】：2011-08-01 14:33:03
【问题描述】：

我想知道您是否可以在 HTML 中定义自己的属性。例如，在 HTML div 中有一系列属性，例如 style、title、class 等。您可以自己编写和添加，同时保持语法正确吗？

例如：<div class="example" test_item="20"></div>

这需要 Javascript 和数据。

【问题讨论】：

【解决方案1】：

除了一个例外——没有。 HTML 使用规范定义的属性和元素，并且只使用那些属性和元素。

该例外是带有names starting data- 的属性，并且仅当您遵循 HTML 5 草案时。

也就是说，在id 或class 属性中编码数据通常是合适的。

【讨论】：

除此之外，这些属性会自动解析到 jQuery 的数据集合中。例如，如果你有：
那么你可以在 jQuery 中使用 $('#example').data('test')
@patrick dw — 命名空间冲突，保持 HTML 理智和有目的（HTML 5 更喜欢牛路径而不是理智），未来证明..
当然可以，但它不会是符合 W3C 的 HTML 4.01 文档。
昆汀，我会改写成 - 你可以，但是 HTML 文档将不符合标准。
@patrick dw — 因为浏览器正在您的伪 HTML 上执行错误恢复。

【解决方案2】：

您可以如下定义任何元素的数据属性，并使用 jQuery 数据方法轻松检索这些属性。

<div class="example" data-mydata="mydata")></div>

//In jquery to retrieve mydata you have to just say
$(".example").data("mydata");

【讨论】：

【解决方案3】：

语法正确——否；但是，jQuery 将毫无问题地读取您添加到 HTML 标记的任何属性。

【讨论】：

【解决方案4】：

作为记录，您可以使用 setAttribute("name","value") 将所需的任何属性添加到带有 javascript 的元素中

document.body.setAttribute("name","value");

而且效果很好。这也主要是跨浏览器：quirksmode

【讨论】：

你说的跨浏览器支持是针对setAttribute的，不是无效属性的设置。
@Ben Everard：实际上我已经对其进行了测试，它（至少）在 IE 8、FF 5、Chrome 12 和 Opera 11 中都能够返回集合的值（无效）具有 getAttribute 的属性。
也许我的意思不是很好，你是说setAttribute 支持跨浏览器，但是设置规范中未定义的无效属性的行为不是支持，它恰好可以工作，因为较新的浏览器尝试恢复带有错误的 HTML，请查看 Quinten 和 Patricks 在标记答案上的讨论。