Atrybuty zostały pokrótce omówione w artykule Omówienie języka HTML. Czas na szczegółowe omówienie.
To właśnie atrybuty sprawiają, że HTML jest tak skuteczny. Atrybuty to rozdzielone spacjami nazwy lub pary nazwa/wartość występujące w tagu otwierającym, które dostarczają informacji o elemencie i jego funkcjach.
Atrybuty definiują zachowanie, połączenia i funkcjonalność elementów. Niektóre atrybuty są globalne, co oznacza, że mogą pojawiać się w tagu otwierającym dowolnego elementu. Inne atrybuty mają zastosowanie do kilku elementów, ale nie do wszystkich. Pozostałe są związane z elementami i dotyczą tylko jednego elementu. W kodzie HTML wszystkie atrybuty oprócz wartości logicznych i – do pewnego stopnia – atrybuty wyliczane wymagają wartości.
Jeśli wartość atrybutu zawiera spację lub znaki specjalne, należy ją umieścić w cudzysłowie. Z tego powodu i aby poprawić czytelność, zawsze zalecamy cytowanie.
W kodzie HTML wielkość liter nie ma znaczenia, ale niektóre wartości atrybutów już tak. Wielkość liter w wartościach należących do specyfikacji HTML nie jest rozróżniana. W wartościach ciągów znaków, takich jak nazwy klas i identyfikatorów, wielkość liter ma znaczenie. Jeśli w wartości atrybutu rozróżniana jest wielkość liter w kodzie HTML, jest ona rozróżniana, jeśli jest używany jako część selektora atrybutu w CSS i JavaScript. W przeciwnym razie jest rozróżniana.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Atrybuty logiczne
Jeśli atrybut logiczny jest obecny, ma on zawsze wartość prawda. Atrybuty logiczne to autofocus, inert, checked, disabled,
required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, i selected.
Jeśli istnieje co najmniej 1 z tych atrybutów, element jest wyłączony, wymagany, tylko do odczytu itd. Jeśli go nie ma, nie ma go.
Wartości logiczne mogą być pomijane, ustawione na pusty ciąg lub być nazwą atrybutu, ale nie trzeba ich ustawiać na ciąg znaków true. Wszystkie wartości, w tym true, false i 😀, mają wartość „true” (prawda).
Te 3 tagi są równoważne:
<input required>
<input required="">
<input required="required">
Jeśli wartość atrybutu to false (fałsz), pomiń atrybut. Jeśli atrybut ma wartość prawda, dołącz go, ale nie podawaj wartości.
Na przykład required="required" nie jest prawidłową wartością w języku HTML, ale jako required jest wartością logiczną, nieprawidłowe wartości przyjmuje wartość „true”.
Nieprawidłowe atrybuty wyliczane nie zawsze mają taką samą wartość jak brakujące, dlatego łatwiej przyzwyczaić się do pomijania wartości, niż pamiętać, które atrybuty są logiczne, a które wyliczane, i potencjalnie zawierają nieprawidłową wartość.
Gdy będziesz się przełączać między wartością prawda i fałsz, dodaj i usuń atrybut za pomocą JavaScriptu, zamiast zmieniać wartość.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Pamiętaj, że w językach XML, takich jak SVG, wszystkie atrybuty muszą zawierać wartość, w tym atrybuty logiczne.
Wyliczane atrybuty
Wyliczane atrybuty są czasami mylone z atrybutami logicznymi. Są to atrybuty HTML, które mają ograniczony zestaw wstępnie zdefiniowanych prawidłowych wartości.
Podobnie jak atrybuty logiczne, mają wartość domyślną, jeśli atrybut istnieje, ale brakuje jego wartości. Jeśli np. dodasz <style contenteditable>, zostanie przyjęta domyślna wartość <style contenteditable="true">.
W przeciwieństwie do atrybutów logicznych pominięcie atrybutu nie oznacza, że ma on wartość fałsz. Obecny atrybut z brakującą wartością nie musi być prawdziwy, a wartość domyślna dla nieprawidłowych wartości nie musi być taka sama jak ciąg o wartości null. Kontynuując przykład, contenteditable domyślnie przyjmuje wartość inherit (jeśli jej nie ma lub jest nieprawidłowa), ale można ją wyraźnie ustawić na wartość false.
Wartość domyślna zależy od atrybutu. W przeciwieństwie do wartości logicznych atrybuty nie mają automatycznie wartości „true” (prawda), jeśli występuje. Jeśli dodasz właściwość <style contenteditable="false">, nie będzie można edytować tego elementu. Jeśli wartość jest nieprawidłowa, na przykład <style contenteditable="😀"> lub (co zaskakuje) <style contenteditable="contenteditable">, wartość jest nieprawidłowa i przyjmuje wartość domyślną inherit.
W większości przypadków w przypadku atrybutów wyliczonych wartości brakujące i nieprawidłowe są takie same. Jeśli na przykład brakuje atrybutu type elementu <input>, występuje on bez wartości lub ma nieprawidłową wartość, domyślnie przyjmuje wartość text. Jest to sytuacja typowa, ale nie jest regułą.
Z tego powodu trzeba wiedzieć, które atrybuty są logiczne, a które wyliczane. W miarę możliwości pomiń wartości, by nie popełnić błędów, i w razie potrzeby wyszukaj je.
Atrybuty globalne
Atrybuty globalne to atrybuty, które można ustawić w dowolnym elemencie HTML, w tym w elementach w elemencie <head>. Istnieje ponad 30 atrybutów globalnych. Teoretycznie można je dodać do dowolnego elementu HTML, ale niektóre atrybuty globalne nie mają żadnego efektu w przypadku niektórych elementów. Na przykład ustawienie hidden w elemencie <meta>, ponieważ metatreść nie jest wyświetlana.
id
Atrybut globalny id służy do definiowania unikalnego identyfikatora elementu. Służy do różnych celów, m.in.:
– docelowy identyfikator fragmentu linku,
– Identyfikacja elementów skryptów.
– Powiązanie elementu formularza z jego etykietą.
– Podanie etykiety lub opisu technologii wspomagających osoby z niepełnosprawnością.
– Style kierowania z wykorzystaniem opcji (o dużej szczegółowości lub jako selektory atrybutów) w CSS.
Wartość id jest ciągiem znaków bez spacji. Jeśli zawiera spację, dokument nie zostanie uszkodzony, ale musisz kierować element na id za pomocą znaków zmiany znaczenia w kodzie HTML, CSS i JS. Pozostałe znaki są prawidłowe. Wartość id może mieć wartość 😀 lub .class, ale nie jest to dobry pomysł. Aby ułatwić sobie programowanie w Twoim obecnym i przyszłości, zmień pierwszy znak na id na literę i używaj tylko liter, cyfr, _ i - z kodu ASCII. Najlepiej jest ustalić konwencję nazewnictwa id i trzymać się jej, ponieważ w wartościach id wielkość liter ma znaczenie.
Element id powinien być unikalny dla dokumentu. Jeśli użyjesz elementu id więcej niż raz, układ strony prawdopodobnie nie ulegnie awarii. Jednak JavaScript, linki i interakcje z elementami mogą działać niezgodnie z oczekiwaniami.
Identyfikator fragmentu linku
Pasek nawigacyjny zawiera cztery linki. Omówimy element link później, ale na razie linki nie są ograniczone do adresów URL opartych na protokole HTTP – mogą to być identyfikatory fragmentów strony w bieżącym dokumencie (lub w innych dokumentach).
Pasek nawigacyjny w nagłówku strony na stronie warsztatów z zakresu systemów uczących się zawiera 4 linki:
Atrybut href zawiera hiperlink, do którego kieruje użytkownika aktywacja linku. Jeśli adres URL zawiera znak (#), po którym następuje ciąg znaków, ten ciąg jest identyfikatorem fragmentu. Jeśli ten ciąg znaków pasuje do id elementu na stronie internetowej, fragment ten jest kotwicą, czyli zakładką do tego elementu. Przeglądarka przewinie się do miejsca, w którym zdefiniowano kotwicę.
Te 4 linki prowadzą do 4 sekcji naszej strony oznaczonych atrybutem id. Gdy użytkownik kliknie dowolny z 4 linków na pasku nawigacyjnym, element powiązany z identyfikatorem fragmentu, czyli element zawierający pasujący identyfikator (minus #), przewinie się do widoku.
Treść warsztatów dotyczących systemów uczących się w języku <main> jest podzielona na 4 sekcje z identyfikatorami. Gdy użytkownik kliknie jeden z linków w elemencie <nav>, sekcja z tym identyfikatorem fragmentu pojawi się na ekranie. Znaczniki są podobne do:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
Porównując identyfikatory fragmentów w linkach <nav>, zauważysz, że każdy z nich odpowiada wartości id elementu <section> w elemencie <main>.
Przeglądarka udostępnia nam bezpłatny link do górnej części strony. Ustawienie href="#top" (wielkość liter nie jest rozróżniana lub po prostu href="#") spowoduje przewinięcie użytkownika do góry strony.
Separator znaków # w interfejsie href nie jest częścią identyfikatora fragmentu. Jest on zawsze ostatnią częścią adresu URL i nie jest wysyłany na serwer.
Selektory arkusza CSS
W CSS możesz kierować reklamy na każdą sekcję za pomocą selektora identyfikatora, np. #feedback, lub (dla mniej szczegółów) selektora atrybutu [id="feedback"] (z uwzględnieniem wielkości liter).
Tworzenie scenariusza
Na stronie MLW.com znajduje się ukryty żart tylko dla użytkowników myszy. Kliknięcie przełącznika światła włącza i wyłącza stronę.
Znaczniki obrazu przełącznika światła:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
Atrybut id może być używany jako parametr metody getElementById(), a poprzedzony prefiksem #, jako część
parametru metod querySelector() i querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Nasza jedna funkcja JavaScript wykorzystuje tę możliwość kierowania elementów według ich atrybutu id:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
Element HTML <label> ma atrybut for, który przyjmuje jako wartość id elementu sterującego formularza, z którym jest powiązany.
Utworzenie wyraźnej etykiety przez umieszczenie elementu id w każdym elemencie sterującym formularza i sparowanie każdej z nich z atrybutem for etykiety gwarantuje, że każdy element sterujący formularza będzie miał powiązaną etykietę.
Każda etykieta może być powiązana dokładnie z jednym elementem sterującym formularza, ale element sterujący formularzem może mieć więcej niż 1 etykietę.
Jeśli element sterujący formularzem jest umieszczony między tagami otwierającymi i zamykającymi <label>, atrybuty for i id nie są wymagane – jest to tzw. etykieta „implicit”. Etykiety informują wszystkich użytkowników, do czego służą poszczególne elementy sterujące formularza.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
Związek między usługami for i id udostępnia informacje użytkownikom technologii wspomagających osoby z niepełnosprawnością. Poza tym kliknięcie w dowolnym miejscu etykiety powoduje wyróżnienie powiązanego elementu, co rozszerza obszar kliknięcia elementu sterującego. Ta funkcja przydaje się nie tylko osobom z zaburzeniami sprawności ruchowej, przez co korzystanie z myszy jest mniej dokładne. Ta funkcja jest też przydatna dla wszystkich użytkowników urządzeń mobilnych, których palce są szerszymi niż przycisk radiowy.
W tym przykładzie kodu piąte pytanie w fałszywym quizie dotyczy jednokrotnego wyboru. Każdy element sterujący formularza ma jawną etykietę, a każda z nich ma unikalną wartość id. Aby zapobiec przypadkowemu zduplikowaniu identyfikatora, wartość „id” jest kombinacją numeru pytania i wartości.
Umieszczając przyciski opcji, ponieważ etykiety opisują ich wartość, obejmujemy wszystkie przyciski o tej samej nazwie w polu <fieldset>, przy czym <legend> to etykieta lub pytanie, dla całego zestawu.
Inne zastosowania ułatwień dostępu
Zastosowanie elementu id w ułatwieniach dostępu i użyteczności nie ogranicza się do etykiet. We wprowadzeniu do tekstu obiekt <section> został przekonwertowany na punkt orientacyjny regionalny przez odwoływanie się do id elementu <h2> jako wartości aria-labelledby obiektu <section> w celu podania nazwy na potrzeby ułatwień dostępu:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Istnieje ponad 50 stanów i właściwości aria-*, których można użyć do zapewnienia ułatwień dostępu. Wartością aria-labelledby, aria-describedby, aria-details i aria-owns jest rozdzielana spacjami lista referencyjna id. Element aria-activedescendant, który identyfikuje obecnie wybrany element podrzędny, przyjmuje jako wartość pojedynczego odwołania id – tego pojedynczego elementu, który jest aktywny (w danym momencie można zaznaczyć tylko 1 element).
class
Atrybut class zapewnia dodatkowy sposób kierowania elementów za pomocą kodu CSS (i JavaScriptu), ale nie ma żadnego innego zastosowania w kodzie HTML (chociaż mogą z nich korzystać platformy i biblioteki komponentów). Jako wartość atrybutu class przyjmuje rozdzielaną spacjami listę klas elementu (wielkość liter ma znaczenie).
Stworzenie solidnej semantycznej struktury umożliwia kierowanie elementów na podstawie ich rozmieszczenia i funkcji. Struktura dźwięku umożliwia korzystanie z selektorów elementów podrzędnych oraz selektorów relacyjnych i atrybutów. Gdy zapoznasz się z atrybutami w tej sekcji, zastanów się, jak można stylizować elementy o tych samych atrybutach lub ich wartościach. Nie chodzi o to, że nie należy używać atrybutu class – po prostu większość programistów zdaje sobie sprawę, że często nie musi.
Jak dotąd MLW nie korzystało z żadnych klas. Czy witrynę można uruchomić bez nazwy klasy? Zobaczymy.
style
Atrybut style umożliwia stosowanie stylów wbudowanych, czyli stylów zastosowanych do pojedynczego elementu, dla którego ustawiono atrybut.
Atrybut style przyjmuje swoje pary wartości właściwości CSS, przy czym składnia wartości jest taka sama jak zawartość bloku stylu CSS: właściwości znajdują się po dwukropku, tak jak w kodzie CSS, a średniki na końcu każdej deklaracji umieszczonej po wartości.
Style są stosowane tylko do elementu, w którym został ustawiony atrybut. Elementy podrzędne dziedziczą dziedziczone wartości właściwości, o ile nie zostaną zastąpione przez inne deklaracje stylów w elementach zagnieżdżonych lub w blokach lub arkuszach stylów <style>. Wartość stanowi odpowiednik treści pojedynczego bloku stylu zastosowanego tylko do tego elementu, więc nie można jej używać na potrzeby generowanych treści, animacji klatek kluczowych ani innych reguł.
Chociaż style jest w rzeczywistości atrybutem globalnym, nie zalecamy korzystania z niego. Zamiast tego zdefiniuj style w osobnym pliku.
Jednak atrybut style może się przydać w fazie programowania, aby umożliwić szybkie określanie stylu, np. w celach testowych. Następnie wybierz styl „rozwiązania” i wklej go w połączonym pliku CSS.
tabindex
Aby go zaznaczyć, do każdego elementu można dodać atrybut tabindex. Wartość tabindex określa, czy ma być dodawana do kolejności kart i opcjonalnie do kolejności znaków tabulacji innej niż domyślna.
Wartość atrybutu tabindex to liczba całkowita. Wartość ujemna (zgodnie z zasadą -1) pozwala zaznaczyć element, np. za pomocą JavaScriptu, ale nie dodaje go do sekwencji znaków tabulacji. Wartość tabindex równa 0 sprawia, że element można zaznaczyć i osiągnąć przy użyciu klawisza Tab. Dodaje się go do domyślnej kolejności kart na stronie w kolejności kodu źródłowego. Wartość 1 lub większa umieszcza element w sekwencji fokusu z priorytetem i nie jest zalecana.
Na tej stronie znajduje się funkcja udostępniania za pomocą elementu niestandardowego <share-action>, który działa jak element <button>. Uwzględniany jest parametr tabindex o wartości 0, który pozwala dodać element niestandardowy do domyślnej kolejności kart na klawiaturze:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
Atrybut role elementu button informuje użytkowników czytnika ekranu, że ten element powinien działać jak przycisk. Stosujemy JavaScript, aby zapewnić ciągłość działania przycisku. Obejmuje to obsługę zdarzeń kliknięcia i klawisza naciśnięcia oraz klawiszy Enter i Spacji.
Elementy sterujące formularza, linki, przyciski i elementy z możliwością edytowania treści mogą być zaznaczone. Gdy użytkownik klawiatury naciśnie klawisz Tab, zaznaczenie przesuwa się na następny element, który można zaznaczyć, tak jakby miał ustawiony element tabindex="0". Domyślnie nie można zaznaczyć innych elementów. Dodanie do tych elementów atrybutu tabindex umożliwia im skupienie się, mimo że w innym przypadku nie.
Jeśli dokument zawiera elementy z elementem tabindex o wartości 1 lub większej, zostaną one umieszczone w oddzielnej sekwencji tabulacji. Jak widać w kodzie, znaki tabulacji rozpoczynają się w osobnej kolejności, od najniższej do najwyższej wartości, a następnie przechodzą przez te elementy w regularnej kolejności w kolejności źródłowej.
Modyfikowanie kolejności kart może negatywnie wpływać na wygodę użytkowników. Utrudnia to poruszanie się po treściach za pomocą technologii wspomagających osoby z niepełnosprawnością – zarówno klawiatur, jak i czytników ekranu. Dla programistów trudno jest też nią zarządzać. Skupienie jest ważne, bo składa się z całego modułu, w którym omawia się koncentrację i kolejność ostrości.
role
Atrybut role jest częścią specyfikacji ARIA, a nie specyfikacji HMTL WhatWG. Atrybutu role można używać do nadawania znaczenia treściom, dzięki czemu czytniki ekranu mogą informować użytkowników witryny o oczekiwanej interakcji użytkownika z obiektem.
Istnieje kilka popularnych widżetów interfejsu, takich jak comboboxy, paski menu, listy kart i treegryty, które nie mają natywnego odpowiednika w języku HTML.
Podczas tworzenia na przykład wzorca projektu z kartami możesz na przykład używać ról tab, tablist i tabpanel. Osoba, która może fizycznie zobaczyć interfejs użytkownika, nauczyła się, jak poruszać się po widżetu i wyświetlać poszczególne panele przez klikanie powiązanych kart.
Dodanie roli tab w funkcji <button role="tab"> w przypadku wyświetlania różnych paneli za pomocą grupy przycisków informuje użytkownika czytnika ekranu, że <button>, który obecnie jest zaznaczony, może przełączać powiązany panel, zamiast implementować typowe funkcje podobne do przycisków.
Atrybut role nie zmienia działania przeglądarki ani nie modyfikuje interakcji z klawiaturą czy wskaźnikiem. Dodanie atrybutu role="button" do obiektu <span> nie powoduje przekształcenia go w <button>. Dlatego zalecamy używanie semantycznych elementów HTML zgodnie z ich przeznaczeniem. Jeśli jednak użycie właściwego elementu nie jest możliwe, atrybut role umożliwia informowanie użytkowników czytnika ekranu o tym, że element niesemantyczny został zastąpiony rolą elementu semantycznego.
contenteditable
Element z atrybutem contenteditable ustawionym na true można edytować i zaznaczyć. Jest też dodawany do kolejności kart tak, jakby został ustawiony parametr tabindex="0". Contenteditable to wyliczony atrybut obsługujący wartości true i false, przy czym domyślna wartość to inherit, jeśli atrybut nie jest obecny lub ma nieprawidłową wartość.
Te 3 tagi otwierające są równoważne:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Jeśli dodasz parametr <style contenteditable="false">, nie będzie można go edytować (chyba że jest on domyślnie edytowalny, np. <textarea>).
Jeśli wartość jest nieprawidłowa (np. <style contenteditable="😀"> lub <style contenteditable="contenteditable">), domyślnie przyjmuje się wartość inherit.
Aby przełączać się między stanami, wyślij zapytanie do wartości właściwości HTMLElement.isContentEditable tylko do odczytu.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Tę właściwość można też określić, ustawiając editor.contentEditable na true, false lub inherit.
Atrybuty globalne można stosować do wszystkich elementów, nawet do elementów <style>. Do utworzenia aktywnego edytora CSS możesz użyć atrybutów i fragmentu kodu CSS.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Spróbuj zmienić color elementu style na inny niż inherit. Następnie spróbuj zmienić typ style na selektor p.
Nie usuwaj właściwości wyświetlania – blok stylu zniknie.
Atrybuty niestandardowe
Dotarliśmy do tylko powierzchni globalnych atrybutów HTML. Istnieje jeszcze więcej atrybutów, które mają zastosowanie tylko do jednego elementu lub do ograniczonego zestawu elementów. Nawet w przypadku setek zdefiniowanych atrybutów możesz potrzebować atrybutu, którego nie ma w specyfikacji. HTML jest dla Ciebie.
Możesz utworzyć dowolny atrybut niestandardowy, dodając prefiks data-. Atrybut może mieć dowolną nazwę zaczynającą się od data-, po której następuje ciąg małych liter, który nie zaczyna się od xml ani nie zawiera dwukropka (:).
Kod HTML wybacza i nie ulega awarii, jeśli utworzysz nieobsługiwane atrybuty, które nie zaczynają się od data lub nawet jeśli rozpoczniesz atrybut niestandardowy od xml lub dodasz atrybut :, utworzenie prawidłowych atrybutów niestandardowych zaczynających się od data- ma wiele zalet.
Dzięki niestandardowym atrybutom danych masz pewność, że przypadkowo nie użyjesz istniejącej nazwy atrybutu. Niestandardowe atrybuty danych są przyszłościowe.
Chociaż przeglądarki nie wdrażają domyślnych działań w przypadku konkretnych atrybutów z prefiksem data-, dostępny jest wbudowany interfejs API zbioru danych, który pozwala iterować atrybuty niestandardowe. Właściwości niestandardowe to doskonały sposób na przekazywanie informacji specyficznych dla aplikacji za pomocą JavaScriptu. Dodaj do elementów atrybuty niestandardowe w postaci data-name i uzyskaj do nich dostęp za pomocą interfejsu DOM, korzystając z atrybutu dataset[name] w danym elemencie.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Możesz użyć właściwości getAttribute(), używając pełnej nazwy atrybutu, lub skorzystać z prostszej właściwości dataset.
el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop
Właściwość dataset zwraca obiekt DOMStringMap atrybutów data- każdego elementu. W <blockquote> jest kilka atrybutów niestandardowych. Właściwość zbioru danych oznacza, że nie musisz wiedzieć, co to za atrybuty niestandardowe, by uzyskać dostęp do ich nazw i wartości:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Atrybuty opisane w tym artykule są globalne, co oznacza, że można je stosować do dowolnego elementu HTML (chociaż nie wszystkie mają na nie wpływ). W następnej kolejności przyjrzymy się 2 atrybutom z obrazu wprowadzającego, którym nie zajmujemy się – target i href – oraz kilku innym atrybutom charakterystycznym dla elementów, gdy przyjrzymy się bliżej linkom.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o atrybutach.
Element id powinien być unikalny w dokumencie.
Wybierz prawidłowo sformułowany atrybut niestandardowy.
data-birthdaybirthdaydata:birthday