Greifen Sie ohne jQuery auf das Attribut 'data-' zu

Kann ich ohne jQuery auf ein Datenattribut zugreifen?

Mit jQuery ist es einfach, aber ich kann nirgendwo sehen, wie es ohne jQuery geht.

Wenn ich bei Google "ohne jQuery" suche, erhalte ich nur jQuery-Beispiele.

Ist es überhaupt möglich?

Auf hier fand ich dieses Beispiel:

<div id='strawberry-plant' data-fruit='12'></div>
<script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
    // 'Setting' data-attributes using setAttribute
    plant.setAttribute('data-fruit', '7'); // Pesky birds
</script>

Es scheint also sehr machbar.

Update: Da Microsoft jetzt (2020) die alte Internet Explorer-Engine zugunsten eines Chromium-basierten Edge datasetausläuft, funktioniert die Eigenschaft wahrscheinlich überall. Die Ausnahme werden zeitweise Organisationen und Unternehmensnetzwerke sein, in denen der IE immer noch gezwungen ist. Zum Zeitpunkt des Schreibens zeigt jsPerf jedoch immer noch, dass die Methode get / setAttribute zumindest unter Chrome 81 schneller ist als die Verwendung von Datasets.

Sie können das Dataset- Attribut verwenden. Wie in:

element = document.getElementById("el");
alert(element.dataset.name); // element.dataset.name == data-name

Es ist nur ein Attribut ... verwenden Sie es getAttributewie jedes andere Attribut: https://developer.mozilla.org/en/docs/DOM/element.getAttribute

Oder fehlt mir der Punkt Ihrer Frage?

Ich denke, Sie können dies versuchen:

var ele = document.getElementById("myelement");
if (ele.hasOwnProperty("data")) {
  alert(ele.data);
}

ODER verwenden

alert(ele['data-property']);