Atrybut globalny HTMLAtrybuty globalne
data-*
Własne atrybuty do przechowywania danych dla skryptów i stylów.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#HTML
<style>
[data-level="expert"] { color: #f472b6; }
li::after { content: " (" attr(data-points) " pkt)"; color: #737373; }
</style>
<ul>
<li data-level="beginner" data-points="120">Ania</li>
<li data-level="expert" data-points="980">Kuba</li>
</ul>Podgląd
Definicja i zastosowanie
#Atrybuty zaczynające się od data- pozwalają dopisać do elementu własne informacje, na przykład identyfikator produktu, stan przycisku czy kategorię. Przeglądarka ich nie interpretuje, są dla Twojego kodu.
W JavaScripcie odczytasz je przez obiekt dataset. Nazwa po data- zamienia się na zapis camelCase: data-product-id staje się element.dataset.productId. Wartości zawsze są napisami.
Możesz też stylować na ich podstawie w CSS, na przykład [data-state="active"], albo wyświetlić wartość przez content: attr(data-label).
Składnia
#Składnia
<element data-nazwa="wartość">…</element>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
#- Nie przechowuj w
data-*niczego tajnego. Każdy może podejrzeć kod strony. - Nazwy pisz małymi literami z myślnikami, na przykład
data-user-id.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.