Wie kann ich in JavaScript auf Datenattributwerte zugreifen und diese verwenden?

Erhalten von Datenattributwerten in JavaScript

In HTML ermöglichen Ihnen Datenattribute, Daten innerhalb von Elementen zu speichern, ohne deren Stil oder Inhalt zu beeinflussen. Wenn Sie mit JavaScript arbeiten, möchten Sie möglicherweise auf die Werte dieser Attribute zugreifen und diese nutzen.

Bedenken Sie das folgende HTML-Markup:

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

Angenommen, Sie müssen nun die Datenattribute erfassen die mit „data-“ beginnen und die JSON-Darstellung bestimmter Werte extrahieren. Bei diesem Versuch können zunächst Nullwerte oder Fehler auftreten:

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});</code>

Um dieses Problem zu beheben, müssen Sie auf die Dataset-Eigenschaft zugreifen, die eine kartenähnliche Sammlung aller Datenattribute bereitstellt. Der korrigierte JavaScript-Code wäre:

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
    var json = JSON.stringify({
        id: parseInt(this.dataset.typeId),
        subject: this.dataset.type,
        points: parseInt(this.dataset.points),
        user: "Luïs"
    });
});</code>

Damit werden die gewünschten Werte erfolgreich erfasst:

{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Durch die Verwendung der Dataset-Eigenschaft können Sie mühelos auf Datenattribute in JavaScript zugreifen und diese bearbeiten. Dies ermöglicht mehr Kontrolle und Flexibilität in Ihrem Code.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript auf Datenattributwerte zugreifen und diese verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!