Na čo sú v HTML data-atributy?

Atribúty dát (data-*) umožňujú ukladať dodatočné, nestandardné údaje o HTML prvkoch na strane klienta bez explicitného používania iných atribútov alebo manipulácie s DOM štruktúrou na tieto účely.

Sú užitočné pre:

• Ukladanie dát pre JavaScript: JavaScript môže ľahko pristupovať k týmto dátam a používať ich na dynamické správanie, interakciu s prvkom alebo výmenu informácií medzi časťami aplikácie.

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

  // Získanie dát z data atribútov
  const userProfile = document.getElementById('user-profile');
  const userId = userProfile.dataset.userId; // "123"
  const userRole = userProfile.dataset.userRole; // "admin"
  

• Vytváranie vlastných atribútov: Namiesto vymýšľania vlastných nestandardných atribútov (čo nezodpovedá špecifikácii HTML) sa používajú data-*, čo robí kód sémantickejším a platným.

• Štylizácia: Pomocou CSS selektorov založených na atribútoch je možné štýlizovať prvky na základe hodnôt ich data- atribútov.

  <button data-status="active">Aktívne tlačidlo</button>
  <button data-status="inactive">Neaktívne tlačidlo</button>
  

  /* Štylizácia na základe data-atribútu */
  button[data-status="active"] {
      background-color: green;
  }
  
  button[data-status="inactive"] {
      background-color: gray;
  }
  

• Frameworky a knižnice: Mnoho frontendových frameworkov a knižníc používa data- atribúty na inicializáciu komponentov, odovzdávanie parametrov alebo viazanie dát (napríklad Vue.js s v-bind alebo React s data- atribútmi na integráciu tretích strán).

• Mikroformáty a štruktúrované údaje: V niektorých prípadoch môžu byť data- atribúty použité na vloženie mikroformátov alebo označenie dát, ktoré sú zrozumiteľné strojom.

Celkovo data- atribúty poskytujú flexibilný a štandardný spôsob ukladania doplnkových informácií priamo v HTML prvkoch, čo uľahčuje ich interakciu pomocou JavaScriptu a CSS.