HTML5-Daten-*-Attribute, die private benutzerdefinierte Daten für eine Seite oder Anwendung speichern

Beispiel

Verwenden Sie data-*-Attribute, um benutzerdefinierte Daten einzubetten:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

Browser-Unterstützung

IE, Firefox, Chrome, Safari, Opera

Alle gängigen Browser unterstützen Daten-*-Attribute.

Definition und Verwendung

data-*-Attribute werden zum Speichern privater benutzerdefinierter Daten für eine Seite oder Anwendung verwendet. Die

data-*-Attribute geben uns die Möglichkeit, benutzerdefinierte Datenattribute in alle HTML-Elemente einzubetten.

Gespeicherte (benutzerdefinierte) Daten können im JavaScript der Seite genutzt werden, um eine bessere Benutzererfahrung zu schaffen (ohne Ajax-Aufrufe oder serverseitige Datenbankabfragen durchzuführen).

data-*-Attribute bestehen aus zwei Teilen:

• Der Attributname sollte keine Großbuchstaben enthalten und nach dem Präfix „data“ muss mindestens ein Zeichen stehen -"

• Der Attributwert kann eine beliebige Zeichenfolge sein

Hinweis: Benutzeragenten ignorieren automatische Attribute mit dem Präfix vollständig „data-“ Definieren Sie Eigenschaften.

Unterschiede zwischen HTML 4.01 und HTML5

data-*-Attribute sind neu in HTML5.

Syntax

<element data-*="somevalue">

Attributwert

值	描述
somevalue	规定属性的值（以字符串）。

Wie im attr und prop von jQuery erwähnt, wenn Sie Eigenschaften in früheren Versionen verwenden IE9 Eine unsachgemäße Verwendung führt zu Speicherverlusten, und der Unterschied zwischen Attribut und Eigenschaft bereitet auch Kopfschmerzen. In HTML5 wird die Methode data-* hinzugefügt, um Attribute anzupassen. Das sogenannte data-* ist eigentlich das Datenpräfix plus benutzerdefiniertes Attribut Name, Daten können mit einer solchen Struktur gespeichert werden. Die Verwendung von data-* kann die aktuelle Situation verwirrender und nicht verwalteter benutzerdefinierter Attribute lösen.

Lese- und Schreibmethoden

data-* verfügt über zwei Einstellungsmethoden. Sie können die Daten direkt in

auf das

<div id="test" data-age="24">
        Click Here
    </div>

HTML-Element

schreiben tag. -age ist ein benutzerdefiniertes Attribut, wir können es auch über JavaScript-Elemente verwenden, die eine Sammlung von Schlüssel-Wert-Paaren vom Typ DOMStringMap sind > Dies fügt dem div ein benutzerdefiniertes Attribut von data-my hinzu.

Bei der Verwendung von JavaScript

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

müssen wir beim Bearbeiten des Datensatzes darauf achten Attribute Entfernen Sie das Präfix data-*. Wie im obigen Beispiel verwenden wir nicht die Form test.dataset.data-my = 'Byron';.

2. Wenn der Attributname auch einen Bindestrich (-) enthält, muss er in die Groß-/Kleinschreibung umgewandelt werden. Wenn jedoch ein Selektor in CSS verwendet wird, müssen wir das Bindestrichformat

Das obige ist der detaillierte Inhalt vonHTML5-Daten-*-Attribute, die private benutzerdefinierte Daten für eine Seite oder Anwendung speichern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!