Atrybuty, właściwości i data-

DOM: znajdowanie i zmiana elementów - JavaScript na stronach WWW (HTML/CSS/JS)

Atrybuty z HTML są dostępne na dwa sposoby: jako właściwości obiektu (`link.href`, `img.alt`, `input.value`) albo metodami `getAttribute` i `setAttribute`. Atrybuty zaczynające się od `data-` to miejsce na własne dane w HTML; skrypt czyta je przez `dataset` (`data-price` to `dataset.price`, zawsze jako tekst). Tu ceny z atrybutów są sumowane.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Atrybuty</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }
  </style>
</head>
<body>
  <p><a id="link" href="https://example.com">link</a></p>
  <ul id="cart">
    <li data-price="4.50" data-qty="2">Zeszyt</li>
    <li data-price="12" data-qty="1">Pióro</li>
    <li data-price="2.25" data-qty="4">Ołówek</li>
  </ul>
  <p id="total"></p>
  <script>
    const link = document.getElementById('link');
    link.setAttribute('href', 'https://bitwizards.pl/');
    link.textContent = 'BitWizards (' + link.getAttribute('href') + ')';
    link.title = 'Otwiera stronę BitWizards';

    let total = 0;
    for (const li of document.querySelectorAll('#cart li')) {
      const value = Number(li.dataset.price) * Number(li.dataset.qty);
      li.textContent += ` x${li.dataset.qty} = ${value.toFixed(2)} zł`;
      total += value;
    }
    document.getElementById('total').textContent = 'Razem: ' + total.toFixed(2) + ' zł';
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.