HTML5 Data Attribute Kullanımı

[DumanInc]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

HTML5 ile data-* niteliği bize standart dışı verileri saklamak için güzel özellik sunmaktadır. HTML etiketlerine bazen ihtiyaçlarımız için keyfi (zorunluluktan) tanımlamalar yapmışızdır. Artık data-* atrribute tanımlaması ile bunun javascript tarafında bir standartı olacak. Veriyi ilgili HTML etiketi üzerinde saklayabileceğiz.

Data-* Attribute Kullanımı​

Veriyi saklamak istediğimizi etiketi data-veriadı=”saklanacak veri” şeklinde tanımlarız.

Örnek:

1 2 3

<h3 id="urun1" data-renk="kırmızı" data-agirlik="200g" data-toplama-tarihi="10 Kasım 2014" >Elma</h3>

renk ,ağırlık ve toplama tarihi verilerini etiket üzerinde sakladık.

Örnek 2:

1 2 3 4 5 6 7

<ul> <li data-hayvan-tipi="kus">Papağan</li> <li data-hayvan-tipi="balik">Somon</li> <li data-hayvan-tipi="surungen">Yılan</li> </ul>

JavaScript ile Data-* Attribute’e Erişim​

JavaScript ile data-* niteliklerinin okunması çok basittir. getAttribute() metodu ile niteliğin tam adı yazılarak okuna bileceği gibi DOMStringMap veri kümesi üzerinden dataset özelliği kullanılarak da nitelik içindeki veriler okunabilir. dataset özelliği ile veriler okunurken iki ve daha fazla kelimeden oluşan veriler için camelCase yazım kuralı kullanılmaktadır. (camelCase: ilk kelimenin ilk harfi küçük diğer kelimelerin baş harfi büyük Örn: data-toplama-tarihi -> toplamaTarihi)

data-* attribute üzerindeki değeri değiştirmek içinde dataset özelliğine yeni değer ataması yada setAttribute() metodu ile yeni değer ataması yapılabilir.

Örnek:

HTML:​

1 2 3

<h3 id="urun1" data-renk="kırmızı" data-agirlik="200g" data-toplama-tarihi="10 Kasım 2014" >Elma</h3>

JS:​

Okuma

1 2 3 4 5 6 7

var urun1=document.getElementById("urun1"); alert( urun1.dataset.renk); //dataset ile ulaşım alert( urun1.getAttribute("data-renk")); // getAttribute() metodu ile ulaşım

Değiştirme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script> var urun1=document.getElementById("urun1"); urun1.dataset.renk="Yeşil"; alert( urun1.dataset.renk); /****************************/ urun1.setAttribute("data-renk","YEŞİL"); alert( urun1.getAttribute("data-renk")); // boş değer atamak içinde null kullanılabilir urun1.dataset.toplamaTarihi=null; </script>

​

CSS ile Data-* Attribute’ Erişim​

HTML veri kumelerine erişebildiğimiz gibi data-* attribute değerlerine de aynı şekilde erişmek mümkün.

Örnek

HTML:​

1 2 3

<h3 id="urun1" data-renk="kırmızı" data-agirlik="200g" data-toplama-tarihi="10 Kasım 2014" >Elma</h3>

CSS​

1 2 3 4 5 6 7 8 9

<style> #urun1[data-renk="kırmızı"]{ color:red; } </style>

Sonuç:​

Data-* niteliği ile HTML etiketlerine basit veriler kaydetmek mümkün olmaktadır. Verileri okumak ve değiştirmek için dataset özelliğinin dışında setAttribute() ve getAttribute() metotlarını kullanmak mümkündür.