Atrybuty

Atrybuty zostały omówione w artykule Omówienie kodu HTML, a teraz czas na bardziej szczegółowe omówienie tego tematu.

To właśnie atrybuty sprawiają, że HTML jest tak potężny. Atrybuty to nazwy rozdzielane spacjami i pary nazwa-wartość, które pojawiają się w tagu otwierającym. Zawierają one informacje o elemencie i jego funkcjonalności.

Atrybuty określają zachowanie, powiązania i funkcje elementów. Niektóre atrybuty są globalne, co oznacza, że mogą pojawiać się w dowolnym tagu otwierającym element. Niektóre atrybuty dotyczą kilku elementów, ale nie wszystkich, a inne są specyficzne dla danego elementu i dotyczą tylko jednego elementu. W HTML wszystkie atrybuty oprócz atrybutów logicznych i w pewnym stopniu atrybutów z listy wymagają wartości.

Jeśli wartość atrybutu zawiera spację lub znaki specjalne, należy ją ująć w cudzysłów. Z tego powodu, a także ze względu na czytelność, zawsze zalecamy stosowanie cudzysłowów.

W HTML wielkość liter nie ma znaczenia, ale w przypadku niektórych wartości atrybutów jest ona uwzględniana. Wielkość liter w wartościach, które są częścią specyfikacji HTML, nie ma znaczenia. W przypadku zdefiniowanych ciągów znaków, takich jak nazwy zajęć i identyfikatorów, wielkość liter ma znaczenie. Jeśli wartość atrybutu jest wielkościowrażliwa w HTML, jest też wielkościowrażliwa w ramach selektora atrybutu w CSS i w JavaScript. W przeciwnym razie nie jest wielkościowrażliwa.

<!-- 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, jego wartość jest zawsze Prawda. Atrybuty logiczne to autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, i selected. Jeśli występuje co najmniej 1 z tych atrybutów, element jest wyłączony, wymagany, tylko do odczytu itp. Jeśli nie występuje, element nie ma tych właściwości.

Wartości logiczne mogą być pominięte, ustawione jako pusty ciąg znaków lub jako nazwa atrybutu, ale nie muszą być ustawione na ciąg znaków true. Wszystkie wartości, w tym true, false i 😀, które są nieprawidłowe, będą interpretowane jako wartość logiczna „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ść true, uwzględnij go, ale nie podawaj wartości. Na przykład required="required" nie jest prawidłową wartością w kodzie HTML, ale ponieważ required jest wartością logiczną, nieprawidłowe wartości są interpretowane jako prawda. Nieprawidłowe atrybuty wyliczeniowe niekoniecznie mają tę samą wartość co wartości brakujące, dlatego łatwiej jest wprowadzić nawykle opuszczania wartości niż zapamiętywać, które atrybuty są logiczne, a które wyliczeniowe i mogą potencjalnie zawierać nieprawidłową wartość.

Podczas przełączania się między wartościami „prawda” i „fałsz” dodawaj i usuwaj atrybut za pomocą JavaScriptu, a nie przełączaj wartości.

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

Pamiętaj, że w językach XML, takich jak SVG, wszystkie atrybuty, w tym atrybuty logiczne, muszą zawierać wartość.

Atrybuty wyliczane

Atrybuty wyliczane 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 zostanie użyta wartość <style contenteditable="true">.

Jednak w odróżnieniu od atrybutów logicznych pominięcie atrybutu nie oznacza, że jest on fałszywy. Obecny atrybut z brakującym parametrem nie musi być prawdziwy, a wartość domyślna dla nieprawidłowych wartości nie musi być taka sama jak ciąg znaków null. W tym przykładzie, jeśli atrybut contenteditable jest nieprawidłowy lub nieobecny, przyjmuje domyślnie wartość inherit, ale można go jawnie ustawić na false.

Wartość domyślna zależy od atrybutu. W przeciwieństwie do wartości logicznych atrybuty nie są automatycznie ustawiane na „prawda”, jeśli są obecne. Jeśli użyjesz elementu <style contenteditable="false">, nie będzie można go edytować. Jeśli wartość jest nieprawidłowa, np. <style contenteditable="😀"> lub, co zaskakujące, <style contenteditable="contenteditable">, jest ona nieprawidłowa i zostaje zastąpiona wartością domyślną inherit.

W większości przypadków atrybutów z wyliczeniami 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ść, przyjmuje domyślnie wartość text. Takie zachowanie jest powszechne, ale nie jest regułą. Dlatego ważne jest, aby wiedzieć, które atrybuty są logiczne, a które ujęte w katalogu. W miarę możliwości pomijaj wartości, aby nie pomylić ich z atrybutami ujętymi w katalogu, i sprawdzaj wartości w razie potrzeby.

Atrybuty globalne

Atrybuty globalne to atrybuty, które można ustawić w dowolnym elemencie HTML, w tym w elementach w elementach <head>. Dostępnych jest ponad 30 atrybutów globalnych. Teoretycznie można je dodać do dowolnego elementu HTML, ale niektóre atrybuty globalne nie mają żadnego wpływu, gdy zostaną ustawione w przypadku niektórych elementów. Na przykład ustawienie wartości hidden w elementach <meta> nie powoduje wyświetlania metatreści.

id

Atrybut globalny id służy do definiowania unikalnego identyfikatora elementu. Służy on do wielu celów, m.in.: - jest celem identyfikatora fragmentu linku. – Identyfikowanie elementu do skryptu. – Powiązanie elementu formularza z jego etykietą. – udostępnianie etykiety lub opisu technologii wspomagających. – kierowanie stylów za pomocą selektorów CSS (o wysokiej specyficzności lub jako selektory atrybutów);

Wartość id to ciąg tekstowy bez spacji. Jeśli zawiera spacje, dokument nie zostanie przerwany, ale musisz użyć znaków ucieczki w kodzie HTML, CSS i JS, aby wskazać znakid. Wszystkie inne znaki są prawidłowe. Wartość id może być 😀 lub .class, ale nie jest to dobry pomysł. Aby ułatwić programowanie sobie i przyszłym użytkownikom, jako pierwszy znak w identyfikatorze id użyj litery, a jako pozostałe znaki użyj tylko liter, cyfr, _ i -. Warto wybrać konwencję nazewnictwa id i stosować ją konsekwentnie, ponieważ id wartości uwzględniają wielkość liter.

Wartość id powinna być unikalna w dokumencie. Użycie id więcej niż raz prawdopodobnie nie spowoduje uszkodzenia układu strony, ale interakcje z elementami, linkami i JavaScriptem mogą nie działać zgodnie z oczekiwaniami.

Identyfikator fragmentu linku

Pasek nawigacyjny zawiera 4 linki. Element link omówimy później, ale już teraz warto wiedzieć, ż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).

W witrynie warsztatów poświęconych uczeniu maszynowemu pasek nawigacyjny w nagłówku strony zawiera 4 linki:

Atrybut href zawiera hiperlink, do którego przekierowuje użytkownika kliknięcie linku. Jeśli adres URL zawiera znak hash (#), po którym następuje ciąg znaków, ten ciąg jest identyfikatorem fragmentu.# Jeśli ciąg znaków pasuje do id elementu na stronie internetowej, fragment jest kotwicą lub zakładką tego elementu. Przeglądarka przewinie do punktu, w którym zdefiniowano kotwicę.

Te 4 linki wskazują na 4 sekcje strony, które są identyfikowane przez atrybut id. Gdy użytkownik kliknie dowolny z czterech linków na pasku nawigacyjnym, element powiązany z identyfikatorem fragmentu, czyli element zawierający identyfikator pasujący do #, przesunie się do widoku.

<main> treści warsztatu dotyczącego systemów uczących się zawierają 4 sekcje z identyfikatorami. Gdy użytkownik kliknie jeden z linków w sekcji <nav>, wyświetli się sekcja z tym identyfikatorem fragmentu. Oznacznik wygląda podobnie do tego:

<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 w elementach <section> w <main>. Przeglądarka udostępnia nam bezpłatny link „u góry strony”. Ustawienie href="#top" (bez uwzględniania wielkości liter) lub po prostu href="#" spowoduje przewinięcie użytkownika do góry strony.

Oddzielnik w formie znaku „#” w elementach href nie jest częścią identyfikatora fragmentu. Identyfikator fragmentu to zawsze ostatni fragment adresu URL i nie jest wysyłany na serwer.

Selektory arkusza CSS

W CSS możesz kierować każdą sekcję za pomocą selektora identyfikatora, np. #feedback, lub, w przypadku mniejszej swoistości, za pomocą selektora atrybutu, np. [id="feedback"], który jest zależny od wielkości liter.

Tworzenie scenariusza

Na stronie MLW.com znajduje się jajko wielkanocne tylko dla użytkowników myszy. Kliknięcie przełącznika włącza i wyłącza stronę.

Oznakowanie obrazu przełącznika światła:html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" />Atrybut id można użyć jako parametr metody getElementById(), a z preiksem # – jako parametr metod querySelector() i querySelectorAll().

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

Nasza funkcja JavaScript wykorzystuje tę możliwość do kierowania na elementy według 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órego wartość to id elementu sterującego formularza, z którym jest powiązany. Utworzenie etykiety dokładnej przez dodanie elementu id do każdego elementu formularza i połączenie go z atrybutem for etykiety zapewnia, że każdy element formularza ma powiązaną etykietę.

Każda etykieta może być powiązana z dokładnie jednym elementem formularza, ale element formularza może mieć więcej niż jedną etykietę.

Jeśli element formularza jest zagnieżdżony między otwierającym i zamykającym tagiem <label>, atrybuty for i id nie są wymagane: nazywa się to „etykietą domyślną”. Etykiety informują wszystkich użytkowników, do czego służy dana kontrolka 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. Ponadto kliknięcie dowolnego miejsca na etykiecie spowoduje skupienie na powiązanym elemencie, co spowoduje rozszerzenie obszaru klikalnego elementu sterującego. Jest to przydatne nie tylko dla osób z problemami z zręcznością, które mają problem z dokładnym sterowaniem myszką, ale też dla każdego użytkownika urządzenia mobilnego, którego palce są szersze niż przycisk radia.

W tym przykładzie kodu 5. fałszywe pytanie w fałszywym teście jest pytaniem jednokrotnego wyboru. Każdy element formularza ma wyraźną etykietę z unikalnym identyfikatorem id. Aby uniknąć przypadkowego powielenia identyfikatora, wartość identyfikatora to kombinacja numeru pytania i wartości.

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

Inne ułatwienia dostępu

Korzystanie z elementu id w celu ułatwienia dostępu i łatwej obsługi nie jest ograniczone do etykiet. W wprowadzeniu do tekstu obiekt <section> został przekształcony w punkt orientacyjny regionu, przez odniesienie do id obiektu <h2> jako wartości aria-labelledby obiektu <section>, aby podać nazwę dostępną:

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

Do zapewnienia dostępności można wykorzystać ponad 50 stanów i właściwości aria-*. Parametry aria-labelledby, aria-describedby, aria-details i aria-owns mają jako wartość listę referencyjną id, oddzieloną spacjami. aria-activedescendant, który identyfikuje aktualnie zaznaczony element potomny, przyjmuje jako wartość odwołanie do pojedynczego elementu id: elementu, który jest zaznaczony (można zaznaczyć tylko jeden element naraz).

class

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

Stworzenie prawidłowej struktury semantycznej umożliwia kierowanie na elementy na podstawie ich lokalizacji i funkcji. struktura dźwięku umożliwia użycie selektorów elementów potomnych, selektorów relacyjnych i selektorów atrybutów; W tej sekcji dowiesz się więcej o atrybutach. Zastanów się, jak można stylizować elementy z tymi samymi atrybutami lub wartościami atrybutów. Nie chodzi o to, że nie możesz używać atrybutu class, ale o to, że większość deweloperów nie zdaje sobie sprawy, że często nie jest to konieczne.

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

style

Atrybut style umożliwia stosowanie stylów wbudowanych, które są stosowane do pojedynczego elementu, w którym ustawiono atrybut. Atrybut style przyjmuje jako wartość 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 są oddzielone dwukropkiem, tak jak w CSS, a każda deklaracja kończy się średnikami, które występują po wartości.

Style są stosowane tylko do elementu, w którym ustawiono atrybut, a potomkowie dziedziczą wartości właściwości dziedziczonych, o ile nie zostaną zastąpione przez inne deklaracje stylów w elementach zagnieżdżonych lub w blokach <style> lub arkuszach stylów. Ponieważ wartość odpowiada zawartości pojedynczego bloku stylów zastosowanego tylko do tego elementu, nie można jej używać do generowania treści, tworzenia animacji klatek ani stosowania innych reguł at.

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

tabindex

Atrybut tabindex można dodać do dowolnego elementu, aby umożliwić jego zaznaczanie. Wartość tabindex określa, czy element ma zostać dodany do kolejności kart, a opcjonalnie do kolejności innych niż domyślna.

Atrybut tabindex przyjmuje jako wartość liczbę całkowitą. Wartość ujemna (zgodnie z konwencją należy użyć -1) sprawia, że element może zostać skoncentrowany, np. za pomocą JavaScriptu, ale nie jest dodawany do sekwencji tabulacji. Wartość tabindex 0 sprawia, że element można zaznaczyć i otworzyć za pomocą klawisza Tab, co powoduje dodanie go do domyślnej kolejności elementów na stronie zgodnie z kolejnością w źródle kodu. Wartość 1 lub większa powoduje, że element jest uwzględniany w priorytetowej sekwencji skupienia, co nie jest zalecane.

Na tej stronie znajduje się funkcja udostępniania, która korzysta z elementu niestandardowego <share-action> działającego jako <button>. tabindex z wartością 0, aby dodać element niestandardowy do domyślnego porządku tabulacji 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>

role z button informuje użytkowników korzystających z czytnika ekranu, że ten element powinien zachowywać się jak przycisk. JavaScript jest używany do zapewnienia prawidłowego działania przycisku, w tym obsługi zdarzeń click i keydown, a także obsługi naciśnięcia klawiszy Enter i Spacja.

Elementy sterujące formularza, linki, przyciski i elementy treści możliwe do edycji mogą być aktywowane. Gdy użytkownik naciśnie klawisz Tab, wyróżnienie przesunie się na następny element, który można aktywować, tak jakby był ustawiony jako tabindex="0". Inne elementy nie są domyślnie możliwe do zaznaczenia. Dodanie atrybutu tabindex do tych elementów umożliwia im skupienie uwagi, gdy w innym przypadku nie byłoby to możliwe.

Jeśli dokument zawiera elementy o wartości tabindex równej co najmniej 1, są one umieszczane w oddzielnej sekwencji kart. Jak widać w codepen, skróty klawiaturowe zaczynają się w oddzielnej sekwencji, od najmniejszej do największej wartości, a potem przechodzą do sekwencji zwykłej w kolejności źródłowej.

Zmiana kolejności kart może negatywnie wpłynąć na wrażenia użytkowników. Utrudnia to korzystanie z technologii wspomagających – klawiatur i czytników ekranu – do nawigacji po Twoich treściach. Jest też trudna w zarządzaniu i utrzymywaniu. Skupienie jest ważne. Mamy cały moduł poświęcony temu zagadnieniu.

role

Atrybut role jest częścią specyfikacji ARIA, a nie specyfikacji HTML WHATWG. Atrybutu role można używać do nadawania treści znaczenia semantycznego, aby czytniki ekranu mogły informować użytkowników witryny o oczekiwanym sposobie interakcji z obiektem.

Istnieje kilka typowych widżetów interfejsu, takich jak kombinacje, paski menu, listy tablicowe i tablice drzewi, które nie mają odpowiednika w HTML. Na przykład podczas tworzenia wzoru projektowania z kartami możesz użyć ról tab, tablist i tabpanel. Osoba, która może fizycznie zobaczyć interfejs użytkownika, nauczyła się na podstawie doświadczeń, jak poruszać się po widżecie i uzyskiwać dostęp do różnych paneli przez klikanie odpowiednich kart. Użycie roli tab z rolą <button role="tab">, gdy grupa przycisków służy do wyświetlania różnych paneli, pozwala użytkownikowi czytnika ekranu wiedzieć, że element <button>, który ma obecnie fokus, może włączyć powiązany panel, zamiast stosować typowe działanie przycisku.

Atrybut role nie zmienia działania przeglądarki ani interakcji z klawiaturą lub urządzeniem wskazującym. Dodanie atrybutu role="button" do atrybutu <span> nie powoduje, że ten drugi stanie się atrybutem <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 informowanie użytkowników czytników ekranu, gdy element niesemantyczn został dodany do roli elementu semantycznego.

contenteditable

Element z atrybutem contenteditable ustawionym na true jest edytowalny, można go zaznaczyć i dodać do kolejności kart tak, jakby był ustawiony na tabindex="0". Contenteditable to atrybuty wyliczeniowy, który obsługuje wartości true i false. Jego wartość domyślna 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 umieścisz element <style contenteditable="false">, nie będzie on możliwy do edycji (chyba że domyślnie jest możliwy do edycji, jak element <textarea>). Jeśli wartość jest nieprawidłowa, np. <style contenteditable="😀"> lub <style contenteditable="contenteditable">, domyślnie jest ustawiana wartość inherit.

Aby przełączać się między stanami, pobierz 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", "");
}

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

Atrybuty globalne można stosować do wszystkich elementów, nawet do elementów <style>. Aby utworzyć edytor CSS na żywo, możesz użyć atrybutów i niewielkiej ilości 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ć wartość właściwości color elementu style na inną niż inherit. Następnie spróbuj zmienić selektor style na selektor p. Nie usuwaj właściwości wyświetlania, ponieważ w przeciwnym razie blok stylu zniknie.

Atrybuty niestandardowe

Omówiliśmy tylko niektóre atrybuty globalne HTML. Istnieje jeszcze więcej atrybutów, które mają zastosowanie tylko do jednego lub ograniczonego zestawu elementów. Nawet jeśli masz zdefiniowane setki atrybutów, możesz potrzebować atrybutu, którego nie ma w specyfikacji. HTML to Twoje rozwiązanie.

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

HTML jest łagodny i nie zawiesi się, jeśli utworzysz nieobsługiwane atrybuty, które nie zaczynają się od data, lub nawet jeśli atrybut niestandardowy zacznie się od xml lub będzie zawierać :. Warto jednak tworzyć prawidłowe atrybuty niestandardowe, które zaczynają się od data-. Dzięki niestandardowym atrybutom danych wiesz, że nie używasz przez przypadek istniejącej nazwy atrybutu. Atrybuty danych niestandardowych są przyszłościowe.

Przeglądarki nie implementują domyślnych zachowań w przypadku atrybutów z prefiksem data-, ale istnieje wbudowane API zbioru danych, które umożliwia przeglądanie atrybutów niestandardowych. Własne właściwości to świetny sposób na przekazywanie informacji dotyczących aplikacji za pomocą kodu JavaScript. Dodawaj atrybuty niestandardowe do elementów w postaci data-name i uzyskiwać do nich dostęp w DOM za pomocą funkcji dataset[name] w przypadku 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 elementach <blockquote> jest kilka atrybutów niestandardowych. Właściwość zbioru danych oznacza, że nie musisz znać tych atrybutów niestandardowych, aby 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ą wpływ na te elementy). Następnie przyjrzymy się 2 atrybutom z obrazu wprowadzającego, których jeszcze nie omawialiśmy (target i href), oraz kilku innym atrybutom powiązanym z poszczególnymi elementami, gdy zagłębimy się w temat linków.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat atrybutów.