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'));​

フィドルを参照してください。