Mit szolgálnak a data-attributes az HTML-ben?

A data- attribútumok (data-*) lehetővé teszik, hogy további, nem szabványos adatokat tároljunk a HTML elemekről az ügyfél oldalon anélkül, hogy más attribútumokat használnánk vagy a DOM-struktúrát manipulálnánk ezek érdekében.

Ezek hasznosak például:

• Adatok tárolása JavaScript számára: A JavaScript könnyen hozzáférhet ezekhez az adatokhoz, és felhasználhatja őket dinamikus viselkedéshez, az elemhez való interakcióhoz vagy az alkalmazás részei közötti információcseréhez.

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

  // Adatok lekérése a data attribútumokból
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Saját attribútumok létrehozása: Ahelyett, hogy saját, nem szabványos attribútumokat találnánk ki (ami nem felel meg a HTML specifikációnak), a data-* attribútumokat használjuk, ami a kódot szemantikusan és érvényesen teszi.

• Stilizálás: Az attribútum alapú CSS-sel kiválaszthatjuk az elemeket, és a data- attribútumaik értékei alapján stílusozhatjuk őket.

  <button data-status="active">Aktív gomb</button>
  <button data-status="inactive">Inaktív gomb</button>
  

  /* Stílus a data- attribútum alapján */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Frameworkök és könyvtárak: Sok frontend keretrendszer és könyvtár használ data- attribútumokat komponensek inicializálására, paraméterek átadására vagy adatok kötésére (például Vue.js v-bind vagy React data- attribútumok a harmadik féltől származó könyvtárak integrációjához).

• Mikroformátumok és strukturált adatok: Bizonyos esetekben a data- attribútumokat mikroformátumok vagy gép által értelmezhető adatok beágyazására használhatjuk.

Általánosságban a data- attribútumok rugalmas és szabványos módot kínálnak arra, hogy további információkat tároljunk közvetlenül a HTML elemekben, megkönnyítve azokkal való interakciót JavaScript és CSS segítségével.