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

Zugriff auf Werte von Datenattributen in JavaScript

In HTML bieten Datenattribute eine Möglichkeit, zusätzliche Informationen über ein Element zu speichern, ohne dessen visuelle Wirkung zu beeinträchtigen Präsentation. Um auf diese Attribute im JavaScript-Code zuzugreifen, müssen Sie die Dataset-Eigenschaft verwenden.

Betrachten Sie das folgende HTML-Element mit verschiedenen Datenattributen:

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

Um die Werte dieser Datenattribute abzurufen und Wenn Sie sie in JavaScript-Code verwenden, würden Sie schreiben:

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

Die Dataset-Eigenschaft gibt ein Objekt zurück, das alle Datenattribute eines Elements enthält, wobei die Eigenschaftsnamen die ursprünglichen Attributnamen mit dem „data-“ sind. " Präfix entfernt. Im obigen Code verwenden wir dieses Objekt, um ein JSON-Objekt zu füllen, das dann zur weiteren Verarbeitung verwendet oder an einen Server gesendet werden kann.

Das Ergebnis dieses Codes wäre eine JSON-Zeichenfolge, die das Objekt darstellt:

<code class="json">{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "Luïs"
}</code>

Dies zeigt, wie Sie die Eigenschaft „dataset“ verwenden können, um auf die Werte von Datenattributen im JavaScript-Code zuzugreifen, sodass Sie diese Informationen einfach für verschiedene Zwecke extrahieren und bearbeiten können.

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