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);
  //更多樣式規(guī)則
}

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);
  //更多樣式規(guī)則
}

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!