Esempio
Utilizzare il data-* attributo per incorporare dati personalizzati:
<ul>
<li data-animal-type="bird">Owl</li>
<li
data-animal-type="fish">Salmon</li>
<li
data-animal-type="spider">Tarantula</li>
</ul>
Prova tu stesso " Definizione e utilizzo
Il data-* attributi viene utilizzato per memorizzare i dati personalizzati privato alla pagina o applicazione.
I data-* attributi ci dà la possibilità di incorporare personalizzato data attributi su tutti gli elementi HTML.
I dati memorizzati (personalizzato) può quindi essere utilizzato in della pagina JavaScript per creare un'esperienza utente più coinvolgente (senza Ajax chiamate o query di database sul lato server).
I data-* attributi sono costituiti da due parti:
- Il nome di attributo non deve contenere lettere maiuscole, e deve essere lungo almeno un carattere dopo il prefisso "data-"
- Il valore di attributo può essere qualsiasi stringa
Nota: Gli attributi personalizzati con il prefisso "data-" sarà completamente ignorato dal programma utente.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'attributo.
| Attributo | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Differenze tra HTML 4.01 e HTML5
I data-* attributi sono di nuovo in HTML5.
Sintassi
<elementdata-*=" somevalue ">
I valori degli attributi
| Valore | Descrizione |
|---|---|
| somevalue | Specifica il valore dell'attributo (come stringa) |
Pagine correlate
HTML Tutorial: attributi HTML
HTML DOM Riferimento: HTML DOM getAttribute() Metodo