HTML

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:

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

Örnek 2:

 

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:

JS:

Okuma

Değiştirme

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:

 

CSS

 

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

 

 

 

 

 

 

 

Yorum Yap