HTML5 data- tulajdonságok

-

A data- tulajdonságokat a HTML5-ben vezették be, méghozzá azért, hogy egyszerűen tudjunk egyedi tulajdonságokat rendelni egy elemhez.

html5

Biztosan ismerős számunkra a szituáció, amikor mikro adatokat akarunk rendelni egy elemhez, de nem tudjuk hol tárolni. Mindeddig erre lényegében két megoldás volt, a rel és a class attribútum. Ha feldolgozandó adatot akartunk kapcsolni az elemekhez, akkor erre a két tulajdonságra voltunk korlátozva, ami egész sok fejfájást tudott okozni.

Természetesen a problémát a szabványos kód írása és az jelentette, hogy a böngésző megfelelően kezelje a hozzárendelt adatokat. Az előbbi két elemmel ezek megoldottak voltak.

A data- tulajdonságok, ami lényegében bármi lehet a data- előtaggal mindezt megoldják HTML5-ben.

<div id="main" data-color="#444" data-align="left"></div>

A tulajdonság érték string lehet. Ezek az adatok privátak (ebben az esetben ez annyit jelent, hogy a felhasználó nem látja, nem befolyásolja a szerkezeti megjelenítést).

Feldolgozás

A módszer kapott egy JavaScript API-t, név szerint a dataset-et. Ezzel könnyen kinyerhetjük az értékeket, azonban a böngésző támogatással probléma lehet, a modern böngészők támogatják, de az IE10 nem (kijelölésnél nem kell megadnunk a data- előtagot) .

A data- attribútumban az a nagyszerű, hogy nincs is rá szükségünk, használhatjuk az eddig módszereket (mint rel tulajdonságnál), ami a getAttribute és a setAttribe:

var msglist = document.getElementById("main");
 
var show = msglist.getAttribute("data-color");
msglist.setAttribute("data-color", "red");

jQuery data() eljárás segítségével is kinyerhetjük, vagy módosíthatjuk az értékeket. Ez a megoldás hasonlóan működik a dataset API-hoz!

Kapcsolódó hivatkozások

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.