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

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

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

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.

var test = document.getElementById('test');
        test.dataset.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!