HTML data-* Atributy


Příklad

K vložení vlastních dat použijte atribut data-*:

<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

Definice a použití

Atributy data-*se používají k ukládání vlastních dat soukromých pro stránku nebo aplikaci.

Atributy data-*nám dávají možnost vložit vlastní datové atributy do všech prvků HTML.

Uložená (vlastní) data pak lze použít v JavaScriptu stránky k vytvoření poutavějšího uživatelského zážitku (bez jakýchkoli volání Ajax nebo dotazů na databázi na straně serveru).

Atributy data-*se skládají ze dvou částí:

  1. Název atributu by neměl obsahovat žádná velká písmena a musí být dlouhý alespoň jeden znak za předponou „data-“
  2. Hodnota atributu může být libovolný řetězec

Poznámka: Vlastní atributy s předponou "data-" budou uživatelským agentem zcela ignorovány.


Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tento atribut plně podporuje.

Attribute
data-* 4.0 5.5 2.0 3.1 9.6

Syntax

<element data-*="somevalue">

Hodnoty atributů

Value Description
somevalue Specifies the value of the attribute (as a string)

Související stránky

HTML kurz: HTML atributy

Reference HTML DOM: Metoda getAttribute() HTML DOM