JavaScript
データ属性

構文

• var x = HTMLElement.dataset。*;
• HTMLElement.dataset。* = "value";

備考

データ属性へのアクセス

データセットプロパティの使用

新しいdatasetプロパティは、任意の要素のすべてのデータ属性data-*へのアクセス（読み取りと書き込みの両方）を可能にします。

<p>Countries:</p>
<ul>
  <li id="C1" onclick="showDetails(this)" data-id="US" data-dial-code="1">USA</li>
  <li id="C2" onclick="showDetails(this)" data-id="CA" data-dial-code="1">Canada</li>
  <li id="C3" onclick="showDetails(this)" data-id="FF" data-dial-code="3">France</li>
</ul>
<button type="button" onclick="correctDetails()">Correct Country Details</button>
<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.dataset.id
            + "\r\nDial Code: " + item.dataset.dialCode;
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.dataset.id = "FR";
    item.dataset.dialCode = "33";
}
</script>

注意： datasetプロパティは最新のブラウザでのみサポートされており、すべてのブラウザでサポートされているgetAttributeおよびsetAttributeメソッドよりも若干遅くなっています。

getAttributeおよびsetAttributeメソッドの使用

HTML5より前の古いブラウザーをサポートしたい場合は、データ属性を含むすべての属性にアクセスするために使用されるgetAttributeメソッドとsetAttributeメソッドを使用できます。上の例の2つの関数は次のように書くことができます：

<script>
function showDetails(item) {
    var msg = item.innerHTML
            + "\r\nISO ID: " + item.getAttribute("data-id")
            + "\r\nDial Code: " + item.getAttribute("data-dial-code");
    alert(msg);
}

function correctDetails(item) {
    var item = document.getEmementById("C3");
    item.setAttribute("id", "FR");
    item.setAttribute("data-dial-code", "33");
}
</script>