javascript - 自定义属性

Question

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

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

我想写这样的东西：

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

但它不起作用。我能怎么做？

Answer 1

您应该改用HTML5 的自定义data-*属性：

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

---

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

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

---

这是小提琴：http: //jsfiddle.net/c55nf/

---

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

Answer 2

使用 html 数据属性：

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

然后使用

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

检索信息

Answer 3

使用HTML 自定义数据属性：

HTML：

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

JavaScript

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

见小提琴。