HTML data-* eigenschap

Definitie en gebruik

data-* De eigenschap wordt gebruikt om private aangepaste gegevens van de pagina of applicatie op te slaan.

data-* De eigenschap geeft ons de mogelijkheid om aangepaste data-eigenschappen in alle HTML-elementen in te voegen.

Opgeslagen (aangepaste) gegevens kunnen worden gebruikt in de JavaScript van de pagina om een betere gebruikerservaring te creëren (zonder Ajax-aanroepen of serverzijdige databasezoeken).

data-* De eigenschap bestaat uit twee delen:

  • De naam van de eigenschap mag geen hoofdletters bevatten en moet ten minste één teken hebben na de voorvoegsel "data-"
  • De waarde van de eigenschap kan elke string zijn

Let op: de gebruikersagent negeert volledig aangepaste eigenschappen met de voorvoegsel "data-".

Zie ook:

HTML Handleiding:HTML eigenschappen

HTML DOM ReferentiesHTML DOM getAttribute() Methode

Voorbeeld

Gebruik de data-* eigenschap om aangepaste gegevens in te voegen:

<ul>
  <li data-animal-type="bird">roodkever</li>
  <li data-animal-type="fish">makreel</li>
  <li data-animal-type="spider">vliegenvanger</li>
</ul>

Probeer het zelf

Syntaxis

<element data-*="somevalue">

Eigenschapswaarde

Waarde Beschrijving
somevalue Definieer de waarde van de eigenschap (als string).

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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