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>&</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.
Atrybut id
powinien być unikalny w dokumencie.
Wybierz prawidłowo sformułowany atrybut niestandardowy.
data-birthday
data:birthday
birthday