Atrybuty

Atrybuty zostały krótko omówione w artykule Omówienie HTML. Czas na szczegółowe omówienie.

Atrybuty są tym, co sprawia, że HTML jest tak potężny. Atrybuty to rozdzielone spacjami nazwy i pary nazwa/wartość, które pojawiają się w tagu otwierającym i zawierają informacje o elemencie oraz jego funkcjonalności.

Tag otwierający, atrybuty i tag zamykający oznaczone na elemencie HTML.

Atrybuty określają zachowanie, powiązania i funkcjonalność elementów. Niektóre atrybuty są globalne, co oznacza, że mogą występować w tagu otwierającym dowolnego elementu. Inne atrybuty dotyczą kilku elementów, ale nie wszystkich, a jeszcze inne są specyficzne dla elementu i mają znaczenie tylko w przypadku jednego elementu. W HTML-u wszystkie atrybuty z wyjątkiem atrybutów logicznych i w pewnym stopniu atrybutów wyliczeniowych wymagają wartości.

Jeśli wartość atrybutu zawiera spację lub znaki specjalne, musi być ujęta w cudzysłów. Z tego powodu i ze względu na lepszą czytelność zawsze zalecamy stosowanie cudzysłowu.

HTML nie rozróżnia wielkości liter, ale niektóre wartości atrybutów tak. Wartości, które są częścią specyfikacji HTML, nie rozróżniają wielkości liter. Zdefiniowane wartości ciągów znaków, takie jak nazwy klas i identyfikatory, uwzględniają wielkość liter. Jeśli wartość atrybutu w HTML-u uwzględnia wielkość liter, to uwzględnia ją również, gdy jest używana jako selektor atrybutu w CSS i JavaScript. W przeciwnym razie nie uwzględnia wielkości liter.

<!-- 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, zawsze ma wartość true. Atrybuty logiczne to m.in. autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, i selected. Jeśli jeden z tych atrybutów (lub więcej) jest obecny, element jest wyłączony, wymagany, tylko do odczytu itp. Jeśli nie jest obecny, nie jest.

Wartości logiczne można pominąć, ustawić jako pusty ciąg znaków lub jako nazwę atrybutu, ale wartość nie musi być ustawiona na ciąg znaków true. Wszystkie wartości, w tym true, false i 😀, mimo że są nieprawidłowe, będą przyjmować wartość „prawda”.

Te 3 tagi są równoważne:

<input required>
<input required="">
<input required="required">

Jeśli wartość atrybutu to „fałsz”, pomiń atrybut. Jeśli atrybut ma wartość „prawda”, uwzględnij go, ale nie podawaj wartości. Na przykład required="required" nie jest prawidłową wartością w HTML, ale ponieważ required jest wartością logiczną, nieprawidłowe wartości są interpretowane jako „true”. Nieprawidłowe atrybuty wyliczeniowe nie zawsze są jednak interpretowane tak samo jak brakujące wartości, dlatego łatwiej jest wyrobić sobie nawyk pomijania wartości niż pamiętać, które atrybuty są logiczne, a które wyliczeniowe, i potencjalnie podawać nieprawidłową wartość.

Podczas przełączania między wartościami „prawda” i „fałsz” dodawaj i usuwaj atrybut w całości za pomocą JavaScriptu, zamiast przełączać wartość.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

Atrybuty wyliczane

Atrybuty wyliczeniowe 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ą one wartość domyślną, jeśli atrybut jest obecny, ale brakuje wartości. Jeśli na przykład dodasz <style contenteditable>, domyślnie będzie to <style contenteditable="true">.

W przeciwieństwie do atrybutów logicznych pominięcie atrybutu nie oznacza, że jest on fałszywy. Atrybut, który występuje, ale nie ma wartości, nie musi być prawdziwy, a domyślna wartość w przypadku nieprawidłowych wartości nie musi być taka sama jak pusty ciąg znaków. W tym przykładzie w przypadku braku lub nieprawidłowej wartości domyślnie przyjmuje wartość inherit, a można ją też jawnie ustawić na false.contenteditable

Wartość domyślna zależy od atrybutu. W przeciwieństwie do wartości logicznych atrybuty nie są automatycznie ustawiane na „true” (prawda), jeśli są obecne. Jeśli uwzględnisz <style contenteditable="false">, elementu nie będzie można edytować. Jeśli wartość jest nieprawidłowa, np. <style contenteditable="😀"> lub <style contenteditable="contenteditable">, jest ona nieprawidłowa i domyślnie przyjmuje wartość inherit.

W większości przypadków atrybutów wyliczeniowych brakujące i nieprawidłowe wartości są takie same. Jeśli na przykład atrybut type w elemencie <input> jest nieobecny, obecny, ale bez wartości lub ma nieprawidłową wartość, domyślnie przyjmuje wartość text. Chociaż takie zachowanie jest powszechne, nie jest regułą. Dlatego ważne jest, aby wiedzieć, które atrybuty są logiczne, a które wyliczeniowe. Jeśli to możliwe, pomijaj wartości, aby uniknąć błędów, i w razie potrzeby wyszukuj wartości.

Atrybuty globalne

Atrybuty globalne to atrybuty, które można ustawić w dowolnym elemencie HTML, w tym w elementach w sekcji <head>. Istnieje ponad 30 atrybutów globalnych. Te atrybuty można teoretycznie dodać do dowolnego elementu HTML, ale niektóre atrybuty globalne nie mają wpływu, gdy są ustawione w przypadku niektórych elementów. Na przykład ustawienie atrybutu hidden w przypadku elementu <meta> jako treści meta nie jest wyświetlane.

id

Atrybut globalny id służy do definiowania unikalnego identyfikatora elementu. Ma wiele zastosowań, m.in.:

  • Miejsce docelowe identyfikatora fragmentu linku.
  • Identyfikowanie elementu na potrzeby skryptu.
  • powiązywanie elementu formularza z jego etykietą;
  • podawanie etykiety lub opisu dla technologii wspomagających;
  • Kierowanie na style za pomocą selektorów o wysokiej specyficzności lub selektorów atrybutów w CSS.

Wartość id to ciąg tekstowy bez spacji. Jeśli zawiera spację, dokument nie zostanie podzielony, ale w kodzie HTML, CSS i JS musisz użyć znaków zmiany znaczenia, aby kierować reklamy na id. Wszystkie pozostałe znaki są prawidłowe. Wartość id może być 😀 lub .class, ale nie jest to zalecane. Aby ułatwić sobie programowanie teraz i w przyszłości, zadbaj o to, aby pierwszym znakiem id była litera, a w nazwach używaj tylko liter ASCII, cyfr, _ i -. Warto opracować idkonwencję nazewnictwa i się jej trzymać, ponieważ id wartości uwzględniają wielkość liter.

Wartośćid powinna być unikalna w dokumencie. Układ strony prawdopodobnie nie ulegnie zmianie, jeśli element id zostanie użyty więcej niż raz, ale JavaScript, linki i interakcje z elementami mogą nie działać zgodnie z oczekiwaniami.

Pasek nawigacyjny zawiera 4 linki. Element linku omówimy później, ale na razie pamiętaj, że linki nie są ograniczone do adresów URL opartych na protokole HTTP. Mogą to być identyfikatory fragmentów sekcji strony w bieżącym dokumencie (lub w innych dokumentach).

Na pasku nawigacyjnym w nagłówku strony warsztatów dotyczących uczenia maszynowego znajdują się 4 linki:

Atrybut href zawiera hiperlink, do którego kieruje użytkownika aktywacja linku. Jeśli adres URL zawiera znak hash (#) i ciąg znaków, ten ciąg jest identyfikatorem fragmentu. Jeśli ten ciąg znaków pasuje do atrybutu id elementu na stronie internetowej, fragment jest kotwicą lub zakładką do tego elementu. Przeglądarka przewinie stronę do miejsca, w którym zdefiniowano kotwicę.

Te 4 linki prowadzą do 4 sekcji naszej strony, które są identyfikowane przez atrybut id. Gdy użytkownik kliknie jeden z 4 linków na pasku nawigacyjnym, element połączony z identyfikatorem fragmentu, czyli element zawierający pasujący identyfikator bez znaku #, zostanie przewinięty do widoku.

<main> Zawartość warsztatów dotyczących uczenia maszynowego składa się z 4 sekcji z identyfikatorami. Gdy użytkownik kliknie jeden z linków w <nav>, wyświetli się sekcja z tym identyfikatorem fragmentu. Znaczniki są podobne do tych:

<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>&amp;</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 pasuje do id <section> w <main>. Przeglądarka udostępnia nam bezpłatny link „u góry strony”. Ustawienie href="#top", href="#" (bez rozróżniania wielkości liter) lub href="#" spowoduje przewinięcie strony do góry.

Separator w postaci znaku hash w href nie jest częścią identyfikatora fragmentu. Identyfikator fragmentu jest 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, np. #feedback. Aby uzyskać mniejszą szczegółowość, użyj selektora atrybutów [id="feedback"], w którym rozróżniana jest wielkość liter.

Tworzenie scenariusza

W MLW.com jest ukryty żart dostępny tylko dla użytkowników myszy. Kliknięcie włącznika światła włącza i wyłącza stronę.

Znaczniki obrazu włącznika światła:

<img src="svg/switch2.svg" id="switch"
  alt="light switch" class="light" />

Atrybut id może być używany jako parametr metody getElementById() oraz z prefiksem # jako część parametru metod querySelector() i querySelectorAll().

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

Nasza funkcja JavaScriptu wykorzystuje tę możliwość do kierowania na elementy według atrybutu id:

<script>
  /* Switch is a reserved word in JavaScript, so instead, we use onoff */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

Element HTML <label> ma atrybut for, którego wartością jest id powiązanego z nim elementu sterującego formularza. Utworzenie jawnej etykiety przez umieszczenie symbolu id przy każdym elemencie sterującym formularza i powiązanie każdego z nich z atrybutem for etykiety zapewnia, że każdy element sterujący formularza ma powiązaną etykietę.

Każda etykieta może być powiązana z dokładnie 1 elementem sterującym formularza, ale element sterujący formularza może mieć więcej niż 1 powiązaną etykietę.

Jeśli element sterujący formularza jest zagnieżdżony między tagami otwierającym i zamykającym <label>, atrybuty for i id nie są wymagane. Jest to tak zwana etykieta „niejawna”. Etykiety informują wszystkich użytkowników o przeznaczeniu poszczególnych elementów sterujących formularza.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

Powiązanie między for a id sprawia, że informacje są dostępne dla użytkowników technologii wspomagających. Dodatkowo kliknięcie dowolnego miejsca na etykiecie powoduje przeniesienie fokusu na powiązany element, co zwiększa obszar kliknięcia elementu sterującego. Jest to przydatne nie tylko dla osób z problemami z rękami, które utrudniają precyzyjne korzystanie z myszy, ale także dla wszystkich użytkowników urządzeń mobilnych, których palce są szersze niż przycisk opcji.

W tym przykładzie kodu fałszywe piąte pytanie fałszywego quizu to pytanie jednokrotnego wyboru. Każdy element formularza ma wyraźną etykietę z unikalnym atrybutem id. Aby uniknąć przypadkowego zduplikowania identyfikatora, jego wartość jest połączeniem numeru pytania i wartości.

Jeśli uwzględniasz przyciski opcji, a etykiety opisują ich wartość, wszystkie przyciski o tej samej nazwie umieszczamy w <fieldset>, gdzie <legend> to etykieta lub pytanie dotyczące całego zestawu.

Inne zastosowania ułatwień dostępu

Użycie id w ułatwieniach dostępu i łatwości obsługi wykracza poza etykiety. W wprowadzeniu do tekstu znak <section> został przekształcony w punkt orientacyjny regionu przez odniesienie się do id elementu <h2> jako wartości atrybutu aria-labelledby elementu <section>, aby podać nazwę dostępną dla osób z niepełnosprawnością:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Istnieje ponad 50 aria-*stanów i właściwości, które można wykorzystać, aby zapewnić dostępność. aria-labelledby, aria-describedby, aria-details i aria-owns przyjmują jako wartość rozdzieloną spacjami id listę odwołań. aria-activedescendant, który identyfikuje element podrzędny, na którym jest fokus, przyjmuje jako wartość pojedyncze odwołanie id: odwołanie do pojedynczego elementu, na którym jest fokus (w danym momencie fokus może być tylko na jednym elemencie).

class

Atrybut class zapewnia dodatkowy sposób kierowania elementów za pomocą CSS (i JavaScript), ale nie służy do niczego innego w HTML (chociaż mogą go używać frameworki i biblioteki komponentów). Atrybut class przyjmuje jako wartość listę klas elementu rozdzielonych spacjami, w której wielkość liter ma znaczenie.

Budowanie solidnej struktury semantycznej umożliwia kierowanie na elementy na podstawie ich umiejscowienia i funkcji. Prawidłowa struktura umożliwia używanie selektorów elementów potomnych, selektorów relacyjnych i selektorów atrybutów. Gdy poznasz atrybuty, zastanów się, jak można stylizować elementy o tych samych atrybutach lub wartościach atrybutów. Nie chodzi o to, że nie należy używać atrybutu class, tylko o to, że większość programistów nie zdaje sobie sprawy, że często nie jest to konieczne.

Do tej pory MLW nie korzystało z żadnych klas. Czy można uruchomić witrynę bez pojedynczej nazwy klasy? Zobaczymy.

style

Atrybut style umożliwia stosowanie stylów wbudowanych, czyli stylów stosowanych do pojedynczego elementu, w którym ustawiono atrybut. Atrybut style przyjmuje jako wartość pary wartości właściwości CSS, a składnia wartości jest taka sama jak zawartość bloku stylu CSS: po właściwościach występuje dwukropek, tak jak w CSS, a średniki kończą każdą deklarację, występując po wartości.

Style są stosowane tylko do elementu, w którym ustawiono atrybut. Elementy podrzędne dziedziczą wartości właściwości, chyba że zostaną one zastąpione przez inne deklaracje stylu w elementach zagnieżdżonych lub w blokach <style> albo arkuszach stylów. Wartość ta obejmuje odpowiednik zawartości pojedynczego bloku stylu zastosowanego tylko do tego elementu, więc nie można jej używać w przypadku wygenerowanych treści, tworzenia animacji klatek kluczowych ani stosowania innych reguł @.

Chociaż atrybut style jest atrybutem globalnym, nie zalecamy jego używania. Zamiast tego zdefiniuj style w osobnym pliku lub plikach. Atrybut style może się jednak przydać podczas tworzenia, aby umożliwić szybkie stylowanie, np. na potrzeby testowania. Następnie wybierz styl „solution” i wklej go do połączonego pliku CSS.

tabindex

Atrybut tabindex można dodać do dowolnego elementu, aby umożliwić jego zaznaczenie. Wartość tabindex określa, czy element ma być dodany do kolejności tabulacji, a opcjonalnie także do niestandardowej kolejności tabulacji.

Wartością atrybutu tabindex jest liczba całkowita. Wartość ujemna (zgodnie z konwencją używa się -1) sprawia, że element może otrzymywać fokus, np. za pomocą JavaScriptu, ale nie dodaje go do sekwencji tabulacji. Wartość tabindex atrybutu 0 sprawia, że element można zaznaczyć i osiągnąć za pomocą klawisza Tab. Dodaje go też do domyślnej kolejności tabulacji na stronie w kolejności kodu źródłowego. Wartość 1 lub większa umieszcza element w sekwencji priorytetowej i nie jest zalecana.

Na tej stronie znajduje się funkcja udostępniania, która korzysta z elementu niestandardowego <share-action> działającego jako <button>. Wartość tabindex zero jest uwzględniona, aby dodać element niestandardowy do domyślnej kolejności tabulacji klawiatury:

<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>

Element role button informuje użytkowników czytników ekranu, że ten element powinien działać jak przycisk. JavaScript jest używany, aby zapewnić działanie przycisku, w tym obsługę zdarzeń click i keydown, a także naciśnięć klawiszy Enter i spacji.

Elementy sterujące formularza, linki, przyciski i elementy contenteditable mogą być aktywne. Gdy użytkownik klawiatury naciśnie klawisz Tab, fokus przeniesie się na następny element, który można aktywować, tak jakby użytkownik ustawił tabindex="0". Inne elementy nie są domyślnie możliwe do zaznaczenia. Dodanie do tych elementów atrybutu tabindex umożliwia im uzyskanie fokusu, gdy w innych okolicznościach nie byłoby to możliwe.

Jeśli dokument zawiera elementy o wartości tabindex równej 1 lub większej, są one uwzględniane w osobnej sekwencji tabulacji. W CodePenie tabulacja rozpoczyna się w osobnej sekwencji, w kolejności od najmniejszej do największej wartości, a potem przechodzi do elementów w zwykłej sekwencji w kolejności źródłowej.

Zmiana kolejności tabulacji może negatywnie wpłynąć na wrażenia użytkowników. Utrudnia to korzystanie z technologii wspomagających, klawiatur i czytników ekranu do poruszania się po treściach. Jest też trudna w zarządzaniu i utrzymaniu dla dewelopera. Skupienie jest ważne. Cały moduł jest poświęcony skupieniu i kolejności skupienia.

role

Atrybut role jest częścią specyfikacji ARIA, a nie specyfikacji HTML WHATWG. Atrybut role może służyć do nadawania treściom znaczenia semantycznego, dzięki czemu czytniki ekranu mogą informować użytkowników witryny o oczekiwanej interakcji z obiektem.

Istnieje kilka typowych widżetów interfejsu, takich jak pola kombi, paski menu, listy kart i siatki drzew, które nie mają natywnych odpowiedników w HTML. Na przykład podczas tworzenia wzorca projektu z kartami można użyć ról tab, tablist i tabpanel. Osoba, która widzi interfejs użytkownika, nauczyła się z doświadczenia, jak poruszać się po widżecie i wyświetlać różne panele, klikając powiązane karty. Użycie roli tab z atrybutem <button role="tab">, gdy grupa przycisków służy do wyświetlania różnych paneli, informuje użytkownika czytnika ekranu, że element <button>, na którym obecnie skupia się fokus, może przełączyć powiązany panel na widoczny, zamiast implementować typową funkcję przycisku.

Atrybut role nie zmienia działania przeglądarki ani nie wpływa na interakcje z klawiaturą lub urządzeniem wskazującym – dodanie role="button" do elementu <span> nie przekształca go w element <button>. Dlatego zalecamy używanie semantycznych elementów HTML zgodnie z ich przeznaczeniem. Jeśli jednak użycie odpowiedniego elementu nie jest możliwe, atrybut role umożliwia poinformowanie użytkowników czytników ekranu, że element niesemantyczny został dostosowany do roli elementu semantycznego.

contenteditable

Element z atrybutem contenteditable ustawionym na true można edytować, można na nim ustawić fokus i jest on dodawany do kolejności tabulacji tak, jakby ustawiony był atrybut tabindex="0". Contenteditable to atrybut wyliczeniowy, który obsługuje wartości true i false, a domyślną wartością jest inherit, jeśli atrybut nie występuje lub ma nieprawidłową wartość.

Te 3 tagi otwierające są równoważne:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

Jeśli uwzględnisz <style contenteditable="false">, element nie będzie edytowalny (chyba że domyślnie jest edytowalny, np. <textarea>). Jeśli wartość jest nieprawidłowa, np. <style contenteditable="😀"> lub <style contenteditable="contenteditable">, domyślnie zostanie przyjęta wartość inherit.

Aby przełączać się między stanami, sprawdź wartość właściwości tylko do odczytu HTMLElement.isContentEditable.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

Alternatywnie tę właściwość można określić, ustawiając wartość editor.contentEditable na true, false lub inherit.

Atrybuty globalne można stosować do wszystkich elementów, nawet do elementów <style>. Za pomocą atrybutów i kodu CSS możesz utworzyć edytor CSS na żywo.

<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 wartość inną niż inherit. Następnie spróbuj zmienić selektor style na p. Nie usuwaj właściwości display, bo w przeciwnym razie blok stylu zniknie.

Atrybuty niestandardowe

To tylko podstawowe informacje o atrybutach globalnych HTML. Istnieje jeszcze więcej atrybutów, które mają zastosowanie tylko do jednego lub ograniczonego zestawu elementów. Nawet jeśli masz setki zdefiniowanych atrybutów, możesz potrzebować atrybutu, którego nie ma w specyfikacji. HTML ma na to sposób.

Możesz utworzyć dowolny atrybut niestandardowy, dodając prefiks data-. Atrybut może mieć dowolną nazwę, która zaczyna się od znaku data-, a następnie zawiera dowolną serię małych liter, która nie zaczyna się od znaku xml i nie zawiera dwukropka (:).

HTML jest tolerancyjny i nie ulegnie uszkodzeniu, jeśli utworzysz nieobsługiwane atrybuty, które nie zaczynają się od data, lub nawet jeśli zaczniesz atrybut niestandardowy od xml lub dodasz :. Jednak tworzenie prawidłowych atrybutów niestandardowych, które zaczynają się od data-, ma swoje zalety. Dzięki atrybutom danych niestandardowych masz pewność, że nie używasz przypadkowo nazwy istniejącego atrybutu. Atrybuty danych niestandardowych są odporne na zmiany w przyszłości.

Przeglądarki nie będą implementować domyślnych zachowań dla żadnego atrybutu z prefiksem data-, ale istnieje wbudowany interfejs API zbioru danych, który umożliwia iterację atrybutów niestandardowych. Właściwości niestandardowe to doskonały sposób na przekazywanie w JavaScript informacji specyficznych dla aplikacji. Dodaj do elementów atrybuty niestandardowe w formie data-name i uzyskaj do nich dostęp za pomocą DOM, używając dataset[name] w odniesieniu do danego elementu.

<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ć atrybutu getAttribute(), podając jego pełną nazwę, lub skorzystać z prostszej właściwości dataset.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

Właściwość dataset zwraca obiekt DOMStringMap z atrybutami data- każdego elementu. W elemencie <blockquote> jest kilka atrybutów niestandardowych. Właściwość zbioru danych oznacza, że aby uzyskać dostęp do nazw i wartości atrybutów niestandardowych, nie musisz wiedzieć, czym one są:

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ą wpływ na te elementy). Następnie przyjrzymy się 2 atrybutom z obrazu wprowadzającego, których nie omówiliśmy – target i href – oraz kilku innym atrybutom specyficznym dla elementów, aby dokładniej przyjrzeć się linkom.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o atrybutach.

Symbol id powinien być unikalny w dokumencie.

Fałsz
Spróbuj ponownie.
Prawda
Dobrze!

Wybierz prawidłowo sformatowany atrybut niestandardowy.

data-birthday
Dobrze
birthday
Spróbuj ponownie.
data:birthday
Spróbuj ponownie