自定义属性答案

【问题标题】：Custom attributes自定义属性
【发布时间】：2012-06-13 23:16:37
【问题描述】：

我想获取自定义属性的值。例如，为此：

<div style="-my-data:3;" id="foo" ></div>

我想写这样的东西：

document.getElementById("foo").style.myData;

但它不起作用。我该怎么办？

【问题讨论】：

Can I access the value of invalid/custom CSS properties from JavaScript?的可能重复
使用 jQuery？虽然说真的，它有一个data() 方法......
我还是只写<div style="-my-data:3;" id="foo" ></div>吗？
@user1365010 我不确定每个浏览器是否会将“myData”替换为“-my-data”。你最好使用 document.getElementById("foo").style["-my-data"]
它也不起作用：jsfiddle.net/Afu8b

【解决方案1】：

您应该改用HTML5's custom data-* attributes：

<div data-myDataName="3" id="foo"></div>

然后，要通过 JavaScript 获取它，只需使用以下代码：

document.getElementById('foo').getAttribute('data-myDataName'); // '3'

P.S.即使它是 HTML5 的一部分，它仍然可以在旧版浏览器中使用。它只是在 HTML5 中标准化。

【讨论】：

【解决方案2】：

使用html数据属性：

<div data-style="3" id="foo"></div>

然后使用

document.getElementById("foo").getAttribute("data-style");

检索信息

【讨论】：

【解决方案3】：

使用HTML custom data attributes:

HTML：

<div data-myval="3" id="foo" ></div>

JavaScript

alert(document.getElementById("foo").getAttribute('data-myval'));

请参阅fiddle。

【讨论】：