Wie Sie HTML5 -benutzerdefinierte Datenattribute verwenden können und warum

HTML5 -Datenattribute können Entwicklern benutzerdefinierte Daten in HTML -Elementen speichern. Sie bieten eine Möglichkeit, HTML -Elementen zusätzliche Informationen hinzuzufügen, die von JavaScript oder CSS verwendet werden können, wodurch die Webseitenfunktionalität verbessert werden kann. In diesem Artikel wird erläutert, welche Datenattribute sind und wofür sie sind.

Schlüsselpunkte

• HTML5 -Datenattribute können Entwicklern zusätzliche Informationen zu HTML -Elementen speichern, auf die von JavaScript oder CSS zugegriffen und verwendet werden kann, wodurch die Funktionen von Webseiten verbessert werden können.
• Datenattribute beginnen immer mit "data-", können verwendet werden, um Elemente in CSS über den Attribut-Selektor zu stylen und den Benutzer Informationen über die attr() -Funktion anzuzeigen.
• In JavaScript können auf Dateneigenschaften mithilfe getAttribute() und setAttribute() Methoden, dataset -attribute oder JQuery -Methoden zugegriffen werden. data()
Während benutzerdefinierte Datenattribute leistungsfähig sind, sollten sie nur verwendet werden, wenn es keine anderen geeigneten HTML -Elemente oder -attribute gibt und nicht zum Speichern großer Datenmengen verwendet werden sollte.

Warum verwenden Sie benutzerdefinierte Dateneigenschaften?

Wir müssen häufig Informationen speichern, die mit verschiedenen DOM -Elementen verbunden sind. Diese Informationen sind für die Leser möglicherweise nicht wichtig, aber es wird unsere Entwicklungsbemühungen erheblich erleichtern. Angenommen, Sie listen verschiedene Restaurants auf einer Webseite auf. Wenn Sie vor HTML5 Informationen wie die Art der Lebensmittel speichern möchten, die von einem Restaurant bereitgestellt wird oder wie weit sie von den Besuchern sind, verwenden Sie das

-Merkmal von HTML. Was ist, wenn Sie auch Ihre Restaurant -ID aufbewahren müssen, um das spezifische Restaurant anzusehen, das der Benutzer besuchen möchte? Hier sind einige Fragen zu den Methoden basierend auf HTML class Attribut: class

html
• Eigenschaften werden nicht verwendet, um solche Daten zu speichern. Der Hauptzweck ist es, Entwicklern einer Reihe von Elementen Stilinformationen zuzuweisen. class
Jedes Mal, wenn eine Nachricht hinzugefügt wird, muss eine neue Klasse dem Element hinzufügen. Dies macht die Parsen von Daten in JavaScript, um die erforderlichen Informationen noch schwieriger zu machen.
Angenommen, der angegebene Klassenname beginnt mit einer Nummer. Wenn Sie sich entscheiden, das Element später basierend auf den Daten im Klassennamen zu stylen, müssen Sie den Zahlen entkommen oder den Attributauswahl im Stylesheet verwenden.

Um diese Probleme zu lösen, führt HTML5 benutzerdefinierte Dateneigenschaften ein. Alle Elementattribute, deren Namen mit

beginnen, sind Datenattribute. Sie können diese Datenattribute auch für Stilelemente verwenden. Geben Sie als nächstes die Grundlagen der Dateneigenschaften ein und lernen Sie, wie Sie auf ihre Werte in CSS und JavaScript zugreifen können. data-

html syntax

Wie bereits erwähnt, beginnt der Name des Datenattributs immer mit

. Hier ist ein Beispiel: data-

<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>

Sie können diese Datenattribute jetzt verwenden, um die Restaurants der Besucher zu durchsuchen und zu sortieren. Zum Beispiel können Sie ihnen jetzt alle vegetarischen Restaurants in einer bestimmten Entfernung zeigen. Zusätzlich zum data- Präfix können die Namen gültiger benutzerdefinierter Datenattribute nur Buchstaben, Zahlen, Bindestriche (-), Punkte (.), Colons (:) oder unterstrichen (_) enthalten. Es kann keine Großbuchstaben enthalten. Bei Verwendung von Dateneigenschaften müssen Sie auf zwei Dinge achten. Zunächst sollten die in diesen Eigenschaften gespeicherten Daten vom Typ String sein. Jeder Inhalt, der in Strings codiert werden kann, kann auch in Dateneigenschaften gespeichert werden. Alle Typkonvertierungen müssen in JavaScript durchgeführt werden. Zweitens sollten Datenattribute nur verwendet werden, wenn keine anderen geeigneten HTML -Elemente oder -attribute vorhanden sind. Zum Beispiel ist es unangemessen, die Klasse eines Elements im Attribut data-class zu speichern. Ein Element kann eine beliebige Anzahl von Datenattributen sowie jeden gewünschten Wert haben.

Datenattribute und CSS

Sie können den Attribut -Selektor verwenden, um Elemente in CSS unter Verwendung von Datenattributen zu stylen. Sie können auch die Funktion attr() verwenden, um Informationen anzuzeigen, die in Dateneigenschaften dem Benutzer gespeichert sind (auf Tooltips oder andere Arten).

Setzen Sie den Elementstil

Zurück zu unserem Beispiel für Restaurants können Sie den Hintergrund des Restaurants auf unterschiedliche Weise mit dem Immobilienauswahl einstellen und den Benutzer für die Art des Restaurants oder deren Entfernung vom Benutzer auffordern. Hier ist ein Beispiel:

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

Erstellen Sie Tooltips

Sie können Tooltips verwenden, um zusätzliche Informationen zu Elementen für den Benutzer anzuzeigen. Ich empfehle Ihnen, diese Methode zum schnellen Prototyping zu verwenden, anstatt Websites zu produzieren, da zumindest die CSS-Tooltips nicht vollständig zugänglich sind. Die Informationen, die Sie anzeigen möchten, können im Attribut data-tooltip gespeichert werden.

<span data-tooltip="简单的解释">Word</span>

Sie können dann die ::before pseudoelement verwenden, um die Daten dem Benutzer vorzustellen.

span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}

Verwenden Sie JavaScript, um auf Datenattribute zuzugreifen

Es gibt drei Möglichkeiten, in JavaScript auf Dateneigenschaften zuzugreifen.

verwenden getAttribute und setAttribute

Sie können in JavaScript getAttribute() und setAttribute() verwenden, um die Werte verschiedener Datenattribute zu erhalten und festzulegen. Wenn die angegebene Eigenschaft nicht vorhanden ist, gibt die getAttribute -Methode null oder eine leere Zeichenfolge zurück. Hier ist ein Beispiel dafür, wie diese Methoden verwendet werden:

let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");

Sie können die Methode setAttribute verwenden, um den Wert einer vorhandenen Eigenschaft zu ändern oder eine neue Eigenschaft hinzuzufügen.

restaurant.setAttribute("data-owner-name", "someName");

verwenden dataset Eigenschaften

Ein einfacherer Weg, um auf Dateneigenschaften zuzugreifen, besteht darin, dataset Eigenschaften zu verwenden. Diese Eigenschaft gibt ein DOMStringMap -Objekt zurück, das einen Eintrag für jede benutzerdefinierte Dateneigenschaft enthält. Es gibt einige Dinge, die Sie bei der Verwendung des dataset -attributs bewusst sein müssen. Es werden drei Schritte durchgeführt, um das benutzerdefinierte Datenattribut in die Taste DOMStringMap zu konvertieren:

• Entfernen Sie das Präfix data- aus dem Attributnamen
Entfernen Sie alle Bindestriche, gefolgt von Kleinbuchstaben aus dem Namen und konvertieren Sie die folgenden Buchstaben in Großbuchstaben
Andere Zeichen bleiben gleich. Dies bedeutet, dass auch jeder Bindestrich, der von Kleinbuchstabenbuchstaben verfolgt wird, gleich bleiben.

element.dataset.keyname Die Eigenschaften können dann mit dem im Objekt als Schlüssel gespeicherten Kamelnamen wie element.dataset[keyname] zugegriffen werden. Eine andere Möglichkeit, auf Eigenschaften zuzugreifen, besteht darin, eine quadratische Halterungsnotation wie

zu verwenden. Betrachten Sie den folgenden HTML:

<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>

Folgende Beispiele:

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

Diese Methode wird jetzt in allen wichtigen Browsern unterstützt und Sie sollten sie zuerst verwenden, um auf benutzerdefinierte Dateneigenschaften zuzugreifen.

Verwenden Sie JQuery

data() Sie können auch die Dateneigenschaften eines Elements mit der

-Methode des Jquery zugreifen. Vor JQuery Version 1.6 müssen Sie mit dem folgenden Code auf die Dateneigenschaften zugreifen:

<span data-tooltip="简单的解释">Word</span>

Ab Version 1.6 beginnt JQuery mit der Verwendung von Kamelversionen von Dateneigenschaften. Jetzt können Sie dasselbe mit dem folgenden Code tun:

span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}

null Sie sollten wissen, dass JQuery auch versuchen wird, die von Dateneigenschaften erhaltenen Zeichenfolgen in geeignete Typen wie Zahlen, Booleans, Objekte, Arrays und

zu konvertieren.

let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");

attr() Wenn Sie möchten, dass JQuery den Wert des Datenattributs als Zeichenfolge erhalten, ohne zu versuchen, ihn in einen anderen Typ zu konvertieren, sollten Sie die

-Methode von JQuery verwenden. JQuery ruft seinen Wert nur dann ab, wenn auf das Datenattribut zum ersten Mal zugegriffen wird. Dann greifen Sie nicht mehr auf die Dateneigenschaften zu oder ändern Sie nicht mehr. Alle Änderungen, die Sie an diesen Eigenschaften vornehmen, werden intern vorgenommen und sind nur in JQuery zugänglich. Angenommen, Sie arbeiten mit den Datenattributen des folgenden Listenelements:

restaurant.setAttribute("data-owner-name", "someName");

data-distance Sie können den Wert seines

-Triputs mit dem folgenden Code ändern:

<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">Salad King</li>

data-distance Wie Sie sehen können, liefert der Zugriff auf den Wert des

-attributs mit dem nativen JavaScript (Nicht-JQuery) immer noch die alten Ergebnisse.

Schlussfolgerung

In diesem Tutorial habe ich alle wichtigen Dinge über HTML5 -Dateneigenschaften behandelt. Zusätzlich zum Erstellen von Tooltips und Styleing -Elementen mithilfe des Attributauswahls können Sie auch Dateneigenschaften verwenden, um Benutzer zu speichern und an Benutzer anzuzeigen, z. B. Benachrichtigungen über ungelesene Nachrichten und mehr.

(Der FAQ -Abschnitt sollte hier hinzugefügt werden, der Inhalt stimmt mit dem FAQ -Teil im Eingabetxt überein, aber der Sprachausdruck kann verfeinert werden. Um eine Duplikation zu vermeiden, lasse ich diesen Teil weg.)

Das obige ist der detaillierte Inhalt vonWie Sie HTML5 -benutzerdefinierte Datenattribute verwenden können und warum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!