JavaScript
Datenattribute

Syntax

• var x = HTMLElement.dataset. *;
• HTMLElement.dataset. * = "Value";

Bemerkungen

Zugriff auf Datenattribute

Verwenden der Dataset-Eigenschaft

Die neue Eigenschaft des dataset ermöglicht den Zugriff (sowohl zum Lesen als auch zum Schreiben) auf alle data-* beliebigen Elements.

<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>

Hinweis: Die dataset Eigenschaft wird nur in modernen Browsern unterstützt , und es ist etwas langsamer als die getAttribute und setAttribute Methoden , die von allen Browsern unterstützt werden.

Verwenden der getAttribute & setAttribute-Methoden

Wenn Sie ältere Browser vor HTML5 unterstützen möchten, können Sie die Methoden getAttribute und setAttribute verwenden, mit denen auf beliebige Attribute einschließlich der getAttribute setAttribute wird. Die beiden Funktionen im obigen Beispiel können folgendermaßen geschrieben werden:

<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>