HTML data-* ominaisuus

Määrittely ja käyttö

data-* Ominaisuus käytetään sivun tai sovelluksen yksityisten mukautettujen tietojen tallentamiseen.

data-* Ominaisuus antaa meille kyvyn sisällyttää mukautettuja data-ominaisuuksia kaikkiin HTML-elementteihin.

Tallennetut (mukautetut) tiedot voidaan käyttää sivun JavaScriptissä luodakseen parempaa käyttäjäkokemusta (ilman Ajax-kutsuja tai palvelinpuolen tietokantahaun kyselyjä).

data-* Ominaisuus koostuu kahdesta osasta:

  • Ominaisuusnimen ei pitäisi sisältää suuria kirjaimia, ja "data-"-etuliitteen jälkeen täytyy olla vähintään yksi merkki
  • Ominaisuusarvo voi olla mikä tahansa merkkijono

Huomaa: käyttäjäagentti jättää kokonaan huomiotta "data-"-etuliitteen omaisuuksia.

Katso myös:

HTML oppituntti:HTML ominaisuudet

HTML DOM viittomakirja:HTML DOM getAttribute() metodi

Esimerkki

Käytä data-* -ominaisuutta mukautetun datan sisällyttämiseen:

<ul>
  <li data-animal-type="鸟类">喜鹊</li>
  <li data-animal-type="鱼类">金枪鱼</li>
  <li data-animal-type="蜘蛛">蝇虎</li>
</ul>

Kokeile itse

Syntaksi

<element data-*="somevalue">

Ominaisuusarvo

Arvo Kuvaus
somevalue Määritä ominaisuuden arvo (merkkijonona).

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

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