HTML-də data atributları nə üçün istifadə olunur?

data-* atributları, vizual təqdimata olmayan xüsusi məlumatları HTML elementlərində saxlamaq üçün istifadə olunur.

İstifadə əsas məqsədləri:

• JavaScript/CSS ilə verilərə çıxış: Onlar elementin məlumatlarını JavaScript (element.dataset) vasitəsilə asanlıqla əldə etmək və manipulyasiya etmək və ya CSS seçicilərində ([data-attribute="value"]) istifadə etmək imkanı verir.
• Meta məlumatların saxlanması: Elementlə əlaqəli əlavə məlumatları saxlamaq üçün əlverişlidir (məsələn, məhsul ID-si, istifadəçi tipi, vəziyyət).
• Xüsusi komponentlərin yaradılması: JavaScript ilə həyata keçirilmiş xüsusi komponentlərin davranışını və ya xüsusiyyətlərini müəyyən etmək üçün istifadə edilə bilər.
• Semantikayı yaxşılaşdırmaq: Məzmunla əlaqəli xüsusi məlumatları təsvir edərək semantikayı artırmaq mümkündür.

HTML-də istifadə nümunəsi:

<div data-product-id="123" data-category="electronics">
  Akıllı telefon
</div>

JavaScript ilə çıxış:

// Elementi əldə etmək
const productElement = document.querySelector('div');

// data atributlarına çıxış
const productId = productElement.dataset.productId; // 123
const category = productElement.dataset.category;   // electronics

CSS-də istifadə:

/* data-category="electronics" olan elementlər üçün stil */
[data-category="electronics"] {
  border: 1px solid blue;
}