Wie können wir benutzerdefinierte Datenattribute in alle HTML-Elemente einbetten?-HTML-Tutorial-php.cn

Wie können wir benutzerdefinierte Datenattribute in alle HTML-Elemente einbetten?

PHPz

Freigeben： 2023-08-28 12:49:06

nach vorne

1385 Leute haben es durchsucht

Wie können wir benutzerdefinierte Datenattribute in alle HTML-Elemente einbetten?

In diesem Artikel müssen wir benutzerdefinierte Datenattribute in alle HTML-Elemente einbetten. Um dies zu erreichen, können wir die data-*-Attribute in HTML verwenden.

In HTML werden die data-*-Attribute verwendet, um Daten anzupassen, die nur für die Webseite oder Anwendung privat sind. Dieses Attribut fügt benutzerdefinierte Werte zu HTML-Elementen hinzu.

Das data-*-Attribut in HTML besteht aus zwei Teilen −

Der Attributwert kann eine beliebige Zeichenfolge sein.
Attributnamen sollten nur Kleinbuchstaben enthalten und müssen mindestens ein Zeichen nach dem Präfix „data-“ enthalten.

Diese Daten werden häufig in JavaScript verwendet, um die Benutzererfahrung zu verbessern. Im Folgenden finden Sie ein Beispiel für das Einbetten benutzerdefinierter Datenattribute in HTML-Elemente.

Beispiel 1

In diesem Beispiel

Wir haben drei (Kleidung) mit benutzerdefinierten Daten-ID- und
Datenpreis
Hier sind die Datenattribute für den Benutzer nicht sichtbar.
Obwohl die Werte für den Benutzer nicht sichtbar sind, sind sie im Dokument vorhanden.

<!DOCTYPE html>
<html>
<head>
   <title>How do we embed custom data attributes on all HTML elements? </title>
</head>
<body>
   <ul>
      <li data-id="1" data-price="INR 1899">Shirt</li>
      <li data-id="2" data-price="INR 2799">Pant</li>
      <li data-id="3" data-price="INR 4599">Jacket</li>
   </ul>
</body>
</html>

Nach dem Login kopieren

Diese Werte werden nicht angezeigt, da wir die von uns angegebenen benutzerdefinierten Eigenschaften nicht extrahiert haben.

Beispiel 2

In diesem Beispiel

Wir haben vier Links mit Tags in der HTML-Tabelle erstellt.
Jedes Element verfügt über ein benutzerdefiniertes Attribut data-plyr-type, das einen Spielernamen enthält.
Wir haben das onClick-Ereignis verwendet, um benutzerdefinierte Eigenschaften zu extrahieren.
Immer wenn wir auf das <a>-Element klicken, extrahiert eine JavaScript-Funktion den Ländernamen des Spielers und zeigt ihn an.

<!DOCTYPE html>
<html>
<head>
   <script>
      function showData(plyr) {
         var players = plyr.getAttribute("data-plyr-type");
         alert(plyr.innerHTML + " is a " + players + ".");
      }
   </script>
</head>
<body>
   <h1>Cricketers!</h1>
   <p>Click on a player to see which team he belongs to:</p>
   <table border=2 px;>
      <caption>Players</caption>
      <tr>
         <td onclick="showData(this)" id="owl" data-plyr-type="Afganistan player">Rashid khan</td>
         <td onclick="showData(this)" id="owl" data-plyr-type="Pakistan player">Babar azam</td>
      </tr>
      <tr>
         <td onclick="showData(this)" id="salmon" data-plyr-type="England player">Jos Buttler</td>
         <td onclick="showData(this)" id="salmon" data-plyr-type="Australia player">Steve smith</td>
      </tr>
      <tr>
         <td onclick="showData(this)" id="tarantula" data-plyr-type="India player">Jasprit bumrah</td>
         <td onclick="showData(this)" id="tarantula" data-plyr-type="West indies player">Jason holder</td>
      </tr>
   </table>
</body>
</html>

Nach dem Login kopieren

Wie wir in der Ausgabe sehen können, wird das benutzerdefinierte Attribut extrahiert und der Ländername des jeweiligen Spielers angezeigt, wenn der Benutzer auf die Tabellendaten eines Cricketspielers klickt.

Das obige ist der detaillierte Inhalt vonWie können wir benutzerdefinierte Datenattribute in alle HTML-Elemente einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!