HTML data-* attribut

Definition och användning

data-* Attribut används för att lagra privata anpassade data för sidan eller applikationen.

data-* Attribut ger oss förmågan att infoga anpassade dataattribut i alla HTML-element.

Lagrade (anpassade) data kan användas i sidans JavaScript för att skapa en bättre användarupplevelse (utan Ajax-anrop eller serverdatabasförfrågningar).

data-* Attribut består av två delar:

  • Attributnamnet bör inte innehålla några stora bokstäver och måste ha minst en tecken efter prefixet "data-"
  • Attributvärdet kan vara vilken sträng som helst

Observera: användaragenten ignorerar helt egna attribut med prefixet "data-".

Se också:

HTML-lärbok:HTML egenskaper

HTML DOM referenshandbok:HTML DOM getAttribute() metoden

Exempel

Infoga anpassad data med data-*-egenskapen:

<ul>
  <li data-animal-type="fågel">Råttfågel</li>
  <li data-animal-type="fisk">Tonfisk</li>
  <li data-animal-type="spindel">Flugstjärt</li>
</ul>

Prova själv

Syntaks

<element data-*="somevalue">

Egenskapsvärde

Värde Beskrivning
somevalue Definiera egenskapens värde (som sträng).

Webbläsarstöd

Numrerna i tabellen anger den första webbläsaren som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6