Heim > Web-Frontend > js-Tutorial > Wie greife ich auf Datenattribute in JavaScript-Code zu und verwende sie?

Wie greife ich auf Datenattribute in JavaScript-Code zu und verwende sie?

Mary-Kate Olsen
Freigeben: 2024-10-25 16:43:02
Original
517 Leute haben es durchsucht

How to Access and Use Data Attributes in JavaScript Code?

Abrufen von Datenattributen im JavaScript-Code

Um auf Attribute zuzugreifen, die mit „data-“ im JavaScript-Code für das bereitgestellte HTML-Element beginnen, müssen Sie Sie müssen die Dataset-Eigenschaft verwenden, wie im folgenden Code gezeigt:

<code class="js">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid), // Accessing data-typedId attribute
    subject: this.dataset.type, // Accessing data-type attribute
    points: parseInt(this.dataset.points), // Accessing data-points attribute
    user: "H. Pauwelyn"
  });
});</code>
Nach dem Login kopieren

Nach der Ausführung dieses Codes enthält die JSON-Variable ein Objekt mit den folgenden Werten:

{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "H. Pauwelyn"
}
Nach dem Login kopieren

Mit dieser Technik können Sie bequem auf Datenattribute im JavaScript-Code zugreifen und diese nutzen, wodurch die Verwaltung und Bearbeitung benutzerdefinierter Attribute in Ihrem HTML-Markup vereinfacht wird.

Das obige ist der detaillierte Inhalt vonWie greife ich auf Datenattribute in JavaScript-Code zu und verwende sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage