HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML data-*Attribute

data-* Globale Attribute sind eine Klasse von Attributen, die als benutzerdefinierte Datenattribute bezeichnet werden und uns die Möglichkeit geben, benutzerdefinierte Datenattribute in allen HTML-Elementen einzufügen, und diese können über Skripte (meistens JavaScript) spezifische Daten zwischen HTML und Skripten austauschen.

Globale HTML-Attribute

Online-Beispiel

Verwenden Sie data-* Attribute zum Einfügen von benutzerdefinierten Daten：

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("Der "　+　animal.innerHTML　+　" ist ein "　+　animalType　+　".");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
　　<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
　　<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>　　
　　<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>　　
</ul>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support data-* Attribute.

Definition and Usage

data-* The attribute is used to store private custom data for the page after the application.

data-* The attribute can be embedded in data for all HTML elements.

Custom data can make the page have a better interactive experience (no need to use Ajax or query data on the server).

data-* The attribute consists of the following two parts:

The attribute name should not contain uppercase letters, in data- After that, there must be at least one character.
The attribute can be any string

Note: Custom attribute prefix "data-" will be ignored by the client.

HTML 4.01 and HTML5differences between

data-* The attribute is HTML5 Newly added.

Syntax

<element data-*="somevalue">

Attribute Value

Value	Description
somevalue	Specify the attribute value (a string)

Globale HTML-Attribute

HTML: <template> Tag