HTML'da data-atributlar nima uchun kerak?

Data-atributlar (data-*) müştəri tərəfində HTML elementləri haqqında əlavə, standart olmayan məlumatları saxlamağa imkan verir və bu məqsədlər üçün digər atributlardan açıq şəkildə istifadə etmədən və ya DOM strukturunu manipulyasiya etmədən istifadə edilə bilər.

Onlar üçün faydalıdır:

• JavaScript üçün məlumatların saxlanması: JavaScript bu məlumatlara asanlıqla daxil ola bilər və onları dinamik davranışlar, elementlə qarşılıqlı əlaqə və ya tətbiqin müxtəlif hissələri arasında məlumat mübadiləsi üçün istifadə edə bilər.

  <div id="user-profile" data-user-id="123" data-user-role="admin">
      Salam, admin!
  </div>
  

  // data-atributlarından məlumat əldə etmək
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Fərdi atributların yaradılması: HTML spesifikasiyasına uyğun olmayan özəl atributların icad edilməsi yerinə, data-* istifadə olunur ki, bu da kodu daha semantik və düzgün edir.

• Stil vermə: CSS seçiciləri vasitəsilə atributlara əsaslanan elementləri stilizə etmək mümkündür və onların data- atributlarının dəyərlərinə əsasən tərtib edilə bilər.

  <button data-status="active">Aktiv düymə</button>
  <button data-status="inactive">İnaktiv düymə</button>
  

  /* data-atributuna əsaslanan stil vermə */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Çərçivələr və kitabxanalar: Bir çox ön tərəf çərçivəsi və kitabxana data- atributlarından istifadə edir komponentləri başlatmaq, parametrləri ötürmək və ya məlumatları bağlamaq üçün (məsələn, Vue.js-də v-bind və ya React-də data- atributları üçün üçüncü tərəf kitabxanalarının inteqrasiyası).

• Mikroformatlar və strukturlaşdırılmış məlumatlar: Bəzi hallarda, data- atributları mikroformatların və ya maşınlar üçün başa düşülən məlumatların yerləşdirilməsi üçün istifadə edilə bilər.

Ümumiyyətlə, data- atributları HTML elementlərində əlavə məlumatların saxlanması üçün çevik və standart bir üsul təmin edir və JavaScript və CSS ilə onlarla qarşılıqlı əlaqəni asanlaşdırır.