HTML'de data-atribütleri ne işe yarar?

Data-atributları (data-*) müşteri tarafında HTML öğeleri hakkında ek, standart olmayan verileri saklamaya olanak tanır ve bu amaçlar için diğer öznitelikleri açıkça kullanmadan veya DOM yapısını manipüle etmeden kullanılabilir.

Bunlar şunlar için faydalıdır:

• JavaScript için veri saklama: JavaScript bu verilere kolayca erişebilir ve bunları dinamik davranışlar, öğeyle etkileşim veya uygulama bölümleri arasında bilgi alışverişi için kullanabilir.

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

  // data-atributlarından veri alma
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Özelleştirilmiş öznitelikler oluşturma: HTML spesifikasyonuna uygun olmayan kendi özel özniteliklerin icat edilmesi yerine, data-* kullanılır, bu da kodu daha anlamlı ve geçerli kılar.

• Stil verme: CSS seçicileri kullanılarak, data- özniteliklerinin değerlerine göre öğeler stilize edilebilir.

  <button data-status="active">Aktif düğme</button>
  <button data-status="inactive">Pasif düğme</button>
  

  /* data-atribütüne göre stil verme */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Çerçeve ve kütüphaneler: Birçok ön yüz çerçevesi ve kütüphane, bileşenleri başlatmak, parametreleri iletmek veya veri bağlamak için data- özniteliklerini kullanır (örneğin, Vue.js v-bind veya React data- öznitelikleri ile üçüncü taraf kütüphaneleri entegre etmek).

• Mikroformatlar ve yapılandırılmış veriler: Bazı durumlarda, data- öznitelikleri mikroformatlar veya makineler tarafından anlaşılır veri gömmek için kullanılabilir.

Genel olarak, data- öznitelikleri, HTML öğelerinde ek bilgileri depolamanın esnek ve standart bir yolunu sağlar, bu da JavaScript ve CSS ile etkileşimi kolaylaştırır.