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.
Destekleyen Tarayıcılar
| Chrome | Internet Explorer | FireFox | Safari | Opera |
| 4.0+ | 5.5+ | 2.0+ | 3.1+ | 9.6+ |
Faydalanılan Kaynaklar
http://html5doctor.com/html5-custom-data-attributes/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
http://www.w3schools.com/tags/att_global_data.asp
