Wie speichere ich benutzerdefinierte Daten in HTML als private Daten für die Seite oder Anwendung?-HTML-Tutorial-php.cn

Inhaltsverzeichnis

Syntax: HTML

Syntax: Zugriff über JavaScript

Syntax: Zugriff über CSS

Beispiel

Result

Ausgabe

Heim

Web-Frontend

HTML-Tutorial

Wie speichere ich benutzerdefinierte Daten in HTML als private Daten für die Seite oder Anwendung?

Sep 12, 2023 pm 02:25 PM

Wie speichere ich benutzerdefinierte Daten in HTML als private Daten für die Seite oder Anwendung?

Benutzerdefinierte Attribute sind speziell entwickelte Attribute, die nicht in den Standard-HTML5-Attributen enthalten sind. Sie ermöglichen es uns, HTML-Tags anzupassen, indem wir unsere eigenen Daten hinzufügen.

Ein benutzerdefiniertes Attribut ist jedes Attribut, das mit data- beginnt. Mithilfe von data-*-Attributen können wir benutzerdefinierte Attribute in alle HTML-Komponenten einbetten.

Syntax: HTML

In HTML ist die Syntax von data-*-Attributen relativ einfach. Jedes Element, das mit data- beginnt, ist ein data-*-Attribut.

<sample_data>
   id = “sample”
   data-index = 1
   data-row = 23
   data-column = 44
</sample_data>

Nach dem Login kopieren

Syntax: Zugriff über JavaScript

Der Zugriff auf diese Datenattribute mithilfe von JavaScript ist ebenfalls relativ einfach. Wir können getAttribute() mit seinem vollständigen HTML-Namen verwenden, der mit dem Dataset-Attribut gelesen werden kann.

const article = document.querySelector('#sample');
sample_data.dataset.index;
sample_data.dataset.row;
sample_data.dataset.column;

Nach dem Login kopieren

Syntax: Zugriff über CSS

Verwenden Sie die CSS-Funktion attr(), um auf Daten zuzugreifen.

sample_data::before {
   content: attr(data-index);
}

Nach dem Login kopieren

Hier sind Beispiele...

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Im folgenden Beispiel verwenden wir JavaScript, um den Wert einer Eigenschaft zu lesen.

<!DOCTYPE html>
<html>
<body>
   <h1 id="Result">Result</h1>
   <ul>
      <li onclick="showPosition(this)"
         id="Siddarth" data-position="winner">
         Siddarth
      </li>
      <li onclick="showPosition(this)"
         id="Arjun" data-position="runner up">
         Arjun
      </li>
      <li onclick="showPosition(this)"
         id="Badri" data-position="third">
         Badri
      </li>
      <li onclick="showPosition(this)"
         id="Nanda" data-position="lost">
         Nanda
      </li>
   </ul>
   <script>
      function showPosition(runner) {
         var position = runner.getAttribute("data-position");
         alert("The " + runner.innerHTML + " is " + position + ".");
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Ausgabe

Beim Ausführen des obigen Skripts wird eine Liste mit Namen ausgegeben, die einige Daten enthält.

Wenn Sie versuchen, auf einen der Namen zu klicken, ruft die Funktion die Daten ab und zeigt ein Warnfeld mit den von uns verwendeten benutzerdefinierten Daten an.

Das obige ist der detaillierte Inhalt vonWie speichere ich benutzerdefinierte Daten in HTML als private Daten für die Seite oder Anwendung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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