HTMLElement.dataset

Obiekt z wartościami atrybutów data-* elementu, do odczytu i zapisu własnych danych.

Zwraca: Obiekt DOMStringMap z wartościami atrybutów data-* zapisanymi jako napisy.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

const course = document.querySelector('#course')

console.log(course.dataset.courseId)
console.log(Number(course.dataset.price) * 2)
console.log(course.dataset.premium === 'true')
console.log(course.dataset)

Konsola

true

DOMStringMap { courseId: '42', price: '49', premium: 'true' }

Definicja i zastosowanie

Atrybuty zaczynające się od data- pozwalają zapisać w HTML własne informacje, np. identyfikator kursu czy cenę produktu. Właściwość dataset udostępnia je jako obiekt: atrybut data-course-id jest dostępny jako dataset.courseId. Części nazwy po myślnikach zaczynają się wielką literą (zapis camelCase).

Wszystkie wartości w dataset są napisami. Liczbę trzeba zamienić przez Number(), a wartość logiczną porównać z napisem, np. dataset.premium === "true". Przypisanie nowej wartości tworzy lub zmienia atrybut w HTML, a delete element.dataset.nazwa go usuwa.

Atrybuty data-* świetnie sprawdzają się przy delegowaniu zdarzeń: jedna funkcja obsługuje wiele przycisków, a każdy przycisk niesie informację, czego dotyczy. Możesz też stylować elementy w CSS selektorem atrybutu, np. [data-status="done"].

Składnia

element.dataset.name
element.dataset.name = value
delete element.dataset.name

Więcej przykładów

Zapis i usuwanie danych

JavaScript

const task = document.querySelector('#task')

task.dataset.status = 'done'
task.dataset.completedAt = '2026-09-28'

console.log(task.getAttribute('data-status'))
console.log(task.getAttribute('data-completed-at'))

delete task.dataset.completedAt
console.log(task.hasAttribute('data-completed-at'))

Konsola

done

2026-09-28

false

Delegowanie zdarzeń z data-*

JavaScript

const shop = document.querySelector('#shop')

shop.addEventListener('click', (event) => {
  const { item, cost } = event.target.dataset
  if (!item) return
  console.log(`Kupujesz: ${item} za ${cost} monet`)
})

shop.querySelector('[data-item="theme"]').click()

Konsola

Kupujesz: theme za 250 monet

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Pamiętaj, że dataset zwraca napisy. dataset.price + 1 da "491", a nie 50. Zamień wartość przez Number().
W HTML pisz nazwy małymi literami z myślnikami (data-course-id), a w JavaScripcie odczytuj je w zapisie camelCase (dataset.courseId).
Nie przechowuj w data-* danych wrażliwych. Każdy może je zobaczyć w kodzie strony.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs