Atrybuty

Atrybuty zostały pokrótce omówione w artykule Omówienie HTML. czas na szczegółową analizę.

To właśnie atrybuty sprawiają, że HTML jest tak skuteczny. Atrybuty to nazwy oddzielone spacjami oraz pary nazwa-wartość widoczne w tagu otwierającym, dostarcza informacji o elemencie i jego funkcjonalności.

Atrybuty określają zachowanie, połączenia i funkcjonalność elementów. Niektóre atrybuty są globalne, co oznacza, że mogą się pojawiać w tagu otwierającym dowolnego elementu. Inne atrybuty odnoszą się do kilku elementów, ale nie do wszystkich. Pozostałe atrybuty odnoszą się do konkretnego elementu, które mają znaczenie tylko w odniesieniu do jednego elementu. W kodzie HTML wszystkie atrybuty oprócz atrybutów logicznych i do pewnego stopnia wyliczanych wymagają wartości.

Jeśli wartość atrybutu zawiera spację lub znaki specjalne, należy ująć ją w cudzysłów. Z tego powodu oraz dla większej czytelności informacji o cytatach.

W kodzie HTML wielkość liter nie ma znaczenia, ale w niektórych wartościach atrybutów już tak. W wartościach, które są częścią specyfikacji HTML, wielkość liter nie jest rozróżniana. W zdefiniowanych wartościach ciągów znaków, takich jak nazwy klas i identyfikatorów, wielkość liter ma znaczenie. Jeśli w wartości atrybutu w kodzie HTML wielkość liter ma znaczenie, Wielkość liter w selektorze atrybutów w arkuszach CSS i JavaScript jest rozróżniana. w przeciwnym razie – nie.

<!-- 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 wartości logicznej

Jeśli istnieje atrybut wartości logicznej, ma on zawsze wartość prawda. Atrybuty wartości logicznej 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 itp. Jeśli go nie ma, nie jest.

Wartości logiczne można pominąć, ustawić jako pusty ciąg lub stanowić nazwę atrybutu. ale nie musi być ustawiony na ciąg true. Wszystkie wartości, w tym true, false i 😀, są nieprawidłowe, przyjmą wartość prawda.

Te trzy tagi są równoważne:

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

Jeśli atrybut ma wartość false (fałsz), pomiń ten atrybut. Jeśli atrybut ma wartość true (prawda), dodaj atrybut, 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 przyjmują wartość prawda. Ponieważ jednak nieprawidłowe atrybuty wyliczane nie zawsze przyjmują tę samą wartość co brakujące wartości, łatwiej jest uzyskać pomijanie wartości zamiast zapamiętywania, które atrybuty są logiczne, a które wyliczane, i mogą podawać nieprawidłową wartość.

Podczas przełączania między wartościami true (prawda) i false (fałsz) dodaj i usuń atrybut całkowicie, korzystając z JavaScriptu, zamiast zmieniać jego 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.

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ą wartość domyślną, jeśli atrybut istnieje, ale nie ma wartości. Jeśli na przykład dodasz <style contenteditable>, domyślna wartość to <style contenteditable="true">.

W przeciwieństwie do atrybutów logicznych pominięcie atrybutu nie oznacza jednak, że jest on fałszywy. obecny atrybut z brakującą wartością nie musi być prawdą; , a wartość domyślna dla nieprawidłowych wartości nie musi być taka sama jak w przypadku ciągu o wartości null. Kontynuując nasz przykład: Jeśli brakuje wartości lub jest ona nieprawidłowa, contenteditable ma domyślną wartość inherit. Można ją bezpośrednio ustawić na 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 istnieje. Jeśli zawiera <style contenteditable="false">, elementu nie można edytować. Jeśli wartość jest nieprawidłowa, np. <style contenteditable="😀">, lub – co zaskakujące – <style contenteditable="contenteditable">, wartość jest nieprawidłowa i domyślnie przyjmuje wartość inherit.

W większości przypadków brakujące i nieprawidłowe wartości są takie same. Jeśli na przykład atrybut type w <input> brakuje, występuje, ale nie ma wartości lub ma nieprawidłową wartość. Domyślna wartość to text. Jest to normalne zjawisko. Z tego względu warto wiedzieć, które atrybuty są logiczne, a które wyliczane. w miarę możliwości pomijaj wartości, aby nie pomyliły się, i wyszukaj je w razie potrzeby.

Atrybuty globalne

Atrybuty globalne to atrybuty, które można ustawić w dowolnym elemencie HTML, w tym elementach w interfejsie <head>. Dostępnych jest ponad 30 atrybutów globalnych. Teoretycznie można je dodać do dowolnego elementu HTML, jednak niektóre atrybuty globalne nie mają żadnego efektu po ustawieniu dla pewnych elementów; Możesz na przykład ustawić atrybut hidden w elemencie <meta>, ponieważ metadane nie są wyświetlane.

id

Atrybut globalny id służy do definiowania unikalnego identyfikatora elementu. Służy do różnych celów, w tym: – wartość docelowa identyfikatora fragmentu linku. – Identyfikacja elementów skryptu. Powiązanie elementu formularza z etykietą. – Dodanie etykiety lub opisu technologii wspomagających osoby z niepełnosprawnością. – Style kierowania z użyciem (bardzo szczegółowa analiza lub selektorów atrybutów) w CSS.

Wartość id jest ciągiem bez spacji. Jeśli dokument zawiera spację, nie będzie on uszkodzony, ale będzie trzeba kierować na id ze znakami zmiany znaczenia w kodzie HTML, CSS i JS. Pozostałe znaki są prawidłowe. Wartością id może być 😀 lub .class, ale nie jest to dobry pomysł. Aby ułatwić programowanie dla Ciebie i Twojej przyszłości, nadaj pierwszemu znakowi litery id literę, i używaj tylko liter ASCII, cyfr, _ i -. Warto najpierw ułożyć konwencję nazewnictwa w id, a potem się jej trzymać. , ponieważ w wartościach id wielkość liter jest rozróżniana.

Parametr id powinien być unikalny dla dokumentu. Jeśli atrybut id zostanie użyty więcej niż raz, układ strony prawdopodobnie nie ulegnie awarii. ale JavaScript, linki i interakcje z elementami mogą nie działać zgodnie z oczekiwaniami.

Identyfikator fragmentu linku

Pasek nawigacyjny zawiera cztery linki. Później omówimy element „link”, ale na razie linki nie są ograniczone. do adresów URL opartych na protokole HTTP; mogą to być identyfikatory fragmentów do sekcji strony w bieżącym dokumencie (lub w innych dokumentach).

Na stronie warsztatów dotyczących systemów uczących się pasek nawigacyjny w nagłówku strony zawiera 4 linki:

Atrybut href zawiera hiperlink, do którego kieruje użytkownika aktywacja linku. Gdy adres URL zawiera znak krzyżyka (#) po którym następuje ciąg znaków, jest to identyfikator fragmentu. Jeśli ten ciąg jest zgodny z id elementu w parametrze strony internetowej, fragment będzie linkiem do tego elementu, czyli zakładką. Przeglądarka przewinie stronę do punktu, w którym zdefiniowano reklamę zakotwiczoną.

Te 4 linki prowadzą do 4 sekcji naszej strony wskazanych za pomocą atrybutu id. Gdy użytkownik kliknie dowolną cztery linki na pasku nawigacyjnym, element powiązany z identyfikatorem fragmentu oraz element zawierający pasujący identyfikator minus #, przewija się do widoku.

Materiał <main> z warsztatu dotyczącego systemów uczących się składa się z 4 sekcji z identyfikatorami. Gdy użytkownik kliknie jedną z w tabeli <nav>, sekcja z tym identyfikatorem fragment będzie widoczna. Znaczniki 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 odpowiada parametrowi id elementu <section> w tagu <main>. Przeglądarka wyświetla bezpłatną „górę strony” . Ustawienie href="#top" (wielkość liter nie jest rozróżniana) lub po prostu href="#" spowoduje przewijanie użytkownika na górę strony.

Separator znaku krzyżyka w elemencie href nie jest częścią identyfikatora fragmentu. Identyfikator fragmentu jest zawsze ostatni częścią adresu URL i nie jest wysyłana do serwera.

Selektory arkusza CSS

W CSS możesz kierować reklamy na każdą sekcję za pomocą selektora identyfikatora, takiego jak #feedback, lub – dla mniejszej ścisłości – z uwzględnieniem wielkości liter selektora atrybutów, [id="feedback"].

Tworzenie scenariusza

Na stronie MLW.com aplikacja jest dostępna 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" /> Atrybutu id można używać jako parametru metody getElementById() i, z prefiksem #, w ramach parametru dla metod querySelector() i querySelectorAll().

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

Nasza jedna funkcja JavaScript korzysta z tej możliwości 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żdego z nich z atrybutem for etykiety. że każdy element sterujący formularza jest powiązany z etykietą.

Każda etykieta może być powiązana tylko z jednym elementem sterującym formularza, natomiast element sterujący formularza może mieć więcej niż jedną powiązaną etykietę.

Jeśli element sterujący formularza jest umieszczony między tagiem otwierającym i zamykającym <label>, atrybuty for i id nie są wymagane. Jest to tzw. „wartość niejawna” . Dzięki etykietom wszyscy użytkownicy wiedzą, 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>.

Powiązanie między for i id powoduje udostępnienie informacji użytkownikom technologii wspomagających osoby z niepełnosprawnością. Ponadto kliknięcie w dowolnym miejscu etykiety powoduje zaznaczenie powiązanego elementu i zwiększenie obszaru kliknięcia elementu sterującego. To nie tylko pomoc dla osób z ograniczoną sprawnością ruchową, co utrudnia przesuwanie w prawo; ale i tak każdy użytkownik urządzenia mobilnego ma szersze palce niż radio. Przycisk

W tym przykładzie piąte pytanie z fałszywego quizu to jednorazowe pytanie jednokrotnego wyboru. Każdy element sterujący formularza ma określony element z unikalną wartością id dla każdej z nich. Aby zapobiec przypadkowemu zduplikowaniu identyfikatora, wartość identyfikatora jest kombinacją numeru pytania i wartości.

Uwzględniając opcje, ponieważ etykiety opisują wartość opcji, w <fieldset> uwzględniliśmy wszystkie przyciski o tej samej nazwie. gdzie <legend> to etykieta lub pytanie dla całego zestawu.

Inne zastosowania ułatwień dostępu

Zastosowanie id w ułatwieniach dostępu i łatwości obsługi nie ogranicza się do etykiet. We wprowadzeniu do tekstu <section> zostało przekształcone w punkt orientacyjny regionu, odwołując się do elementu id elementu <h2> jako wartości parametru aria-labelledby interfejsu <section>, która zapewnia nazwa na potrzeby ułatwień dostępu:

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

Występuje ponad 50 stanów i właściwości aria-*, które można wykorzystać do zapewnienia ułatwień dostępu. aria-labelledby, aria-describedby, aria-details i aria-owns traktują jako wartości oddzieloną spacjami listę id. aria-activedescendant, czyli identyfikuje aktualnie aktywny element podrzędny, przyjmuje jako wartość pojedyncze odwołanie id: wartość pojedynczego elementu z ostrością (może być zaznaczony tylko jeden element naraz).

class

Atrybut class zapewnia dodatkowy sposób kierowania elementów za pomocą CSS (i JavaScript), ale nie służy do żadnych innych celów. w języku HTML (chociaż mogą z nich korzystać platformy i biblioteki komponentów). Jako wartość atrybutu class przyjmuje się listę rozdzielaną spacjami klas z rozróżnianiem wielkości liter dla elementu.

Budowanie solidnej struktury semantycznej umożliwia kierowanie elementów na podstawie ich położenia i funkcji. Struktura dźwięku umożliwia użycie selektorów elementów podrzędnych, selektorów relacyjnych i atrybutów. Gdy dowiesz się więcej o atrybutach w tej sekcji zastanów się, jak można stylizować elementy o tych samych atrybutach lub wartościach atrybutów. To nie to, Nie należy używać atrybutu class. Po prostu większość programistów nie zdaje sobie sprawy, że często nie ma takiej potrzeby.

Jak dotąd MLW nie używało żadnych klas. Czy witrynę można uruchomić bez nazwy klasy? Zobaczymy.

style

Atrybut style umożliwia stosowanie stylów wbudowanych, czyli stylów stosowanych do pojedynczego elementu, dla którego jest ustawiony atrybut. Atrybut style przyjmuje jako pary wartości właściwości CSS, przy czym składnia wartości jest taka sama jak zawartość Blok stylu CSS: właściwości są otoczone dwukropkiem (tak jak w przypadku CSS), a średniki kończą każdą deklarację, która następuje po wartości.

Style są stosowane tylko do elementu, dla którego ustawiono atrybut, a elementy podrzędne dziedziczą wartości właściwości odziedziczonych, jeśli nie są. zastąpione przez inne deklaracje stylów w elementach zagnieżdżonych albo w blokach lub arkuszach stylów <style>. Ponieważ wartość stanowi odpowiednik treści pojedynczego bloku stylu zastosowanego tylko do tego elementu, nie można go użyć do wygenerowanych treści, tworzyć animacji klatek kluczowych ani stosować na innych zasadach.

Chociaż atrybut style w rzeczywistości jest atrybutem globalnym, nie zalecamy używania go. Zamiast tego definiuje się style w osobnym pliku lub plikach. Atrybut style może być przydatny podczas programowania, ponieważ umożliwia szybkie określanie stylu, na przykład w celach testowych. Następnie wykonaj „rozwiązanie” i wklej go w połączonym pliku CSS.

tabindex

Atrybut tabindex można dodać do dowolnego elementu, aby go wyróżnić. Wartość tabindex określa, czy zostanie dodana do kolejności kart, a opcjonalnie w innej kolejności tabulacji.

Atrybut tabindex przyjmuje wartość będącą liczbą całkowitą. Wartość ujemna (konwencją jest użycie -1) sprawia, że element może (np. za pomocą JavaScriptu), ale nie dodaje elementu do sekwencji tabulacji. Wartość tabindex 0 sprawia, że element, który można zaznaczyć i osiągnąć za pomocą klawisza Tab, dodając go do domyślnej kolejności kart na stronie w kolejności kodu źródłowego. Wartość 1 lub więcej umieszcza element w sekwencji z priorytetem i nie jest zalecana.

Na tej stronie znajduje się funkcja udostępniania wykorzystująca element niestandardowy <share-action> działający jako <button>. tabindex zera pozwala dodać element niestandardowy do domyślnej kolejności znaków 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 elementu button informuje użytkowników czytnika ekranu, że ten element powinien działać jak przycisk. JavaScript jest używany do zapewnienia, dotrzymujemy obietnicy działania przycisku; w tym obsługę zdarzeń click i keydown oraz naciśnięć klawiszy Enter i Spacja.

Elementy sterujące formularzy, linki, przyciski i elementy edytowalne mogą być zaznaczone. gdy użytkownik na klawiaturze naciśnie klawisz Tab, zaznaczenie zostanie przeniesione do następnego elementu, który można zaznaczyć, tak jakby był ustawiony tabindex="0". Inne elementy nie można zaznaczyć domyślnie. Dodaję: tabindex i umożliwia im skupienie się na nich, co w przeciwnym razie by ich nie zaznaczało.

Jeśli dokument zawiera elementy z parametrem tabindex o wartości 1 lub większej, zostaną one umieszczone w osobnej sekwencji kart. Jak widać w koderze, naciskanie klawisza Tab rozpoczyna się w osobnej sekwencji, w kolejności od najniższej do najwyższej wartości, przed przejściem przez te w sekwencji standardowej w kolejności źródłowej.

Zmiana kolejności przycisków może znacznie negatywnie wpływać na wygodę użytkowników. Utrudnia korzystanie z technologii wspomagających osoby z niepełnosprawnością – zarówno klawiatury, jak i czytników ekranu. swoje treści. Trudno jest też nimi zarządzać. Ważne jest skupienie, znajduje się cały moduł poświęcony porządkowi koncentracji.

role

Atrybut role jest częścią specyfikacji ARIA. a nie specyfikacji HMTL WhatWG. Atrybut role może służą do nadawania znaczenia treści semantycznej zawartości, 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, np. pola złożone, paski menu, listy kart, i treegridy, które nie mają natywnego odpowiednika HTML. Na przykład podczas tworzenia wzorca projektu z kartami funkcje tab, tablist i Możesz użyć ról tabpanel. Osoba, która może zobaczyć interfejs nauczył się, jak poruszać się po widżecie i wyświetlać różne panele przez klikanie powiązanych kart. Dodanie roli tab do <button role="tab">, gdy grupa przycisków służy do wyświetlania różnych paneli, aby użytkownik czytnika ekranu o tym wiedział że wybrany element <button> może wyświetlać powiązany panel, zamiast implementować typowe funkcje przypominające przyciski.

Atrybut role nie zmienia działania przeglądarki ani interakcji z urządzeniem, np. z klawiaturą czy wskaźnikiem – dodaje wartość role="button" do elementu <span>. nie zmienia jej w <button>. Dlatego zalecamy używanie semantycznych elementów HTML zgodnie z ich przeznaczeniem. Jednak w przypadku używania funkcji nie można wybrać właściwego elementu, atrybut role umożliwia informowanie użytkowników czytników ekranu o zmodyfikowaniu elementu niesemantycznego. w rolę elementu semantycznego.

contenteditable

Element z atrybutem contenteditable ustawionym na true można edytować, zaznaczyć i jest on dodawany do kolejności kart tak jak Ustawiono: tabindex="0". Contenteditable to atrybut wyliczany, który obsługuje wartości true i false o domyślnej wartości inherit , jeśli atrybut nie istnieje lub ma nieprawidłową wartość.

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

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

Jeśli użyjesz właściwości <style contenteditable="false">, elementu nie będzie można edytować (chyba że domyślnie można go edytować, np. <textarea>). Jeśli wartość jest nieprawidłowa, np. <style contenteditable="😀"> lub <style contenteditable="contenteditable">, zostanie domyślnie ustawiona wartość inherit.

Aby przełączać się między stanami, wyślij zapytanie o wartość 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 <style>. Możesz użyć atrybutów i odrobiny CSS, aby utworzyć aktywny edytor 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ść color elementu style na inną niż inherit. Następnie spróbuj zmienić selektor style na p. Nie usuwaj właściwości wyświetlania, bo blok stylu zniknie.

Atrybuty niestandardowe

Dotknęliśmy tylko płaszczyzny globalnych atrybutów HTML. Istnieje jeszcze więcej atrybutów, które mają zastosowanie tylko do jednego lub ograniczonej liczby elementów. Nawet w przypadku setek zdefiniowanych atrybutów możesz potrzebować atrybutu, którego nie ma w specyfikacji. HTML pomoże Ci w osiągnięciu tego celu.

Możesz utworzyć dowolny atrybut niestandardowy, dodając przedrostek data-. Możesz nadać atrybutowi dowolną nazwę, która zaczyna się od data- po których następuje dowolna seria małych liter, które nie zaczynają się od xml i nie zawierają dwukropka (:).

HTML jest wybaczający i nie przestanie działać, jeśli utworzysz nieobsługiwane atrybuty, które nie zaczynają się od data (nawet jeśli zaczynasz) Twojego atrybutu niestandardowego z xml lub zawierającego :, utworzenie prawidłowych atrybutów niestandardowych ma swoje zalety.data- Dzięki niestandardowym atrybutom danych masz pewność, że przypadkowo nie używasz istniejącej nazwy atrybutu. Atrybuty danych niestandardowych można wykorzystać w przyszłości.

Przeglądarki nie implementują domyślnych działań w przypadku konkretnych atrybutów z prefiksem data-, ale istnieje wbudowany interfejs API zbioru danych. do iteracji niestandardowych atrybutów. Właściwości niestandardowe to doskonały sposób na przekazywanie informacji dotyczących konkretnych aplikacji za pomocą JavaScriptu. Dodawaj atrybuty niestandardowe do elementów w formacie data-name i uzyskuj do nich dostęp w interfejsie DOM za pomocą typu dataset[name]. na 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ć atrybutu getAttribute() z pełną nazwą 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. Istnieje kilka atrybutów niestandardowych. w: <blockquote>. Właściwość zbioru danych oznacza, że nie musisz wiedzieć, czym są atrybuty niestandardowe, aby uzyskać dostęp do ich nazwy i wartości:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Atrybuty w tym artykule mają charakter globalny, co oznacza, że można je stosować do dowolnego elementu HTML (chociaż nie wszystkie mają wpływ na tych elementów). Następnie przyjrzymy się 2 atrybutom ze zdjęcia wprowadzającego, których nie omówiliśmy – target i href – oraz kilka innych atrybutów charakterystycznych dla tych elementów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o atrybutach.