HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>data-* — Global Attributes</title>

  <style>

    body { font-family: system-ui, sans-serif; padding: 1.5rem; }

    .product { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; max-width: 360px; }

    #out { margin-top: 1rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.9rem; }

  </style>

</head>

<body>

  <article class="product" data-product-id="42" data-price="19.99" data-in-stock="true">

    Wireless Mouse

  </article>

  <p id="out">Click "Run" to read dataset values (also check the browser console).</p>



  <script>

    const el = document.querySelector('.product');

    const out = document.getElementById('out');

    out.textContent =

      'productId: ' + el.dataset.productId +

      ' | price: ' + el.dataset.price +

      ' | inStock: ' + el.dataset.inStock;

    console.log('dataset.productId →', el.dataset.productId);

    console.log('dataset.price →', el.dataset.price);

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Global Attributes — data-* and dataset