Dados HTML-* Atributo
Definição e uso
O
data-*atributo é usado para armazenar dados personalizados privados para a página ou aplicativo.
O
data-*atributo nos dá a capacidade de incorporar atributos de dados personalizados em todos os elementos HTML.
Os dados armazenados (personalizados) podem ser usados no JavaScript da página para criar uma experiência de usuário mais envolvente (sem chamadas Ajax ou consultas de banco de dados do lado do servidor).
O
data-*atributo consiste em duas partes:
- O nome do atributo não deve conter letras maiúsculas e deve ter pelo menos um caractere após o prefixo "data-"
- O valor do atributo pode ser qualquer string
Observação: os atributos personalizados prefixados com "data-" serão completamente ignorados pelo agente do usuário.
Aplica-se a
O
data-*atributo é um atributo global e pode ser usado em qualquer elemento HTML.
| Elemento | Atributo |
|---|---|
| Todos os elementos HTML | dados-* |
Exemplo
Exemplo
Use o atributo data-* para incorporar dados personalizados:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o atributo.
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |