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

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

PHPz

Freigeben： 2023-09-12 14:25:02

nach vorne

683 Leute haben es durchsucht

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