HTML5 Data Attribute Kullanımı

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:

<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:

<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:

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

JS:

Okuma

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

<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:

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

CSS

<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

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