Attribute wurden bereits kurz im Überblick über HTML erwähnt. Jetzt ist es an der Zeit, sie genauer zu betrachten.
Attribute machen HTML so leistungsfähig. Attribute sind durch Leerzeichen getrennte Namen und Name/Wert-Paare, die im öffnenden Tag erscheinen und Informationen zu und Funktionen für das Element liefern.
Attribute definieren das Verhalten, die Verknüpfungen und die Funktionalität von Elementen. Einige Attribute sind global, d. h. sie können im öffnenden Tag eines beliebigen Elements erscheinen. Andere Attribute gelten für mehrere, aber nicht für alle Elemente. Wiederum andere sind elementspezifisch und nur für ein einzelnes Element relevant. In HTML ist für alle Attribute mit Ausnahme von booleschen Attributen und bis zu einem gewissen Grad auch für aufgezählte Attribute ein Wert erforderlich.
Wenn ein Attributwert ein Leerzeichen oder Sonderzeichen enthält, muss der Wert in Anführungszeichen gesetzt werden. Aus diesem Grund und für eine bessere Lesbarkeit wird das Anführungszeichen immer empfohlen.
In HTML wird nicht zwischen Groß- und Kleinschreibung unterschieden, bei einigen Attributwerten ist das jedoch der Fall. Bei Werten, die Teil der HTML-Spezifikation sind, wird die Groß- und Kleinschreibung nicht berücksichtigt. Bei definierten Stringwerten wie Klassen- und ID-Namen wird die Groß- und Kleinschreibung berücksichtigt. Wenn ein Attributwert in HTML groß- und kleinschreibungsempfindlich ist, gilt dies auch, wenn er in CSS und JavaScript als Teil eines Attributselektors verwendet wird. Andernfalls ist das nicht der Fall.
<!-- 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">
Boolesche Attribute
Wenn ein boolesches Attribut vorhanden ist, ist es immer wahr. Zu den booleschen Attributen gehören autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default,, loop, autoplay, controls, muted, readonly, multiple, und selected.
Wenn eines oder mehrere dieser Attribute vorhanden sind, ist das Element deaktiviert, erforderlich, schreibgeschützt usw. Ist das nicht der Fall, ist das nicht der Fall.
Boolesche Werte können entweder weggelassen, auf einen leeren String gesetzt oder der Name des Attributs sein. Der Wert muss jedoch nicht auf den String true gesetzt werden. Alle Werte, einschließlich true, false und 😀, werden als wahr ausgewertet, auch wenn sie ungültig sind.
Diese drei Tags sind äquivalent:
<input required>
<input required="">
<input required="required">
Wenn der Attributwert „false“ ist, lassen Sie das Attribut weg. Wenn das Attribut „wahr“ ist, geben Sie es an, geben Sie aber keinen Wert an.
required="required" ist beispielsweise kein gültiger Wert in HTML. Da required jedoch ein boolescher Wert ist, werden ungültige Werte als „wahr“ ausgewertet.
Da ungültige Werte für aufzählbare Attribute jedoch nicht unbedingt denselben Wert wie fehlende Werte ergeben, ist es einfacher, Werte wegzulassen, als sich zu merken, welche Attribute boolesche und welche aufzählbare Attribute sind und potenziell einen ungültigen Wert liefern.
Wenn Sie zwischen „wahr“ und „falsch“ wechseln möchten, fügen Sie das Attribut mit JavaScript hinzu und entfernen Sie es wieder, anstatt den Wert zu ändern.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
In XML-Sprachen wie SVG müssen alle Attribute einen Wert enthalten, einschließlich boolescher Attribute.
Aufzählungsattribute
Aufzählungsattribute werden manchmal mit booleschen Attributen verwechselt. Dies sind HTML-Attribute mit einer begrenzten Anzahl vordefinierter gültiger Werte.
Wie bei booleschen Attributen gibt es auch hier einen Standardwert, wenn das Attribut vorhanden, der Wert aber fehlt. Wenn Sie beispielsweise <style contenteditable> angeben, wird standardmäßig <style contenteditable="true"> verwendet.
Im Gegensatz zu booleschen Attributen bedeutet das Auslassen des Attributs jedoch nicht, dass es falsch ist. Ein vorhandenes Attribut mit einem fehlenden Wert ist nicht unbedingt wahr. Der Standardwert für ungültige Werte ist nicht unbedingt ein Nullstring. Im Beispiel ist contenteditable standardmäßig inherit, wenn es fehlt oder ungültig ist, und kann explizit auf false festgelegt werden.
Der Standardwert hängt vom Attribut ab. Im Gegensatz zu booleschen Werten sind Attribute nicht automatisch „wahr“, wenn sie vorhanden sind. Wenn Sie <style contenteditable="false"> einfügen, kann das Element nicht bearbeitet werden. Wenn der Wert ungültig ist, z. B. <style contenteditable="😀"> oder <style contenteditable="contenteditable">, wird standardmäßig inherit verwendet.
Bei aufgezählten Attributen sind in den meisten Fällen fehlende und ungültige Werte identisch. Wenn das Attribut type beispielsweise bei einem <input> fehlt, vorhanden ist, aber keinen Wert hat oder einen ungültigen Wert hat, wird standardmäßig text verwendet. Dieses Verhalten ist zwar häufig, aber keine Regel.
Daher ist es wichtig zu wissen, welche Attribute boolesche und welche aufgezählte Werte sind. Lassen Sie nach Möglichkeit Werte weg, damit Sie sie nicht falsch verstehen, und suchen Sie nach Bedarf den Wert nach.
Globale Attribute
Globale Attribute können für jedes HTML-Element festgelegt werden, einschließlich Elemente in der <head>. Es gibt mehr als 30 globale Attribute. Theoretisch können diese Attribute jedem HTML-Element hinzugefügt werden. Einige globale Attribute haben jedoch keine Auswirkungen, wenn sie für bestimmte Elemente festgelegt werden. Wenn Sie beispielsweise hidden für ein <meta> festlegen, werden keine Metainhalte angezeigt.
id
Mit dem globalen Attribut id wird eine eindeutige Kennung für ein Element definiert. Sie dient vielen Zwecken, darunter:
- Das Ziel der Fragment-ID eines Links.
– Elemente für das Scripting identifizieren
– Verknüpfen eines Formularelements mit seinem Label.
– Ein Label oder eine Beschreibung für Hilfstechnologien angeben.
– Targeting-Stile mit hoher Spezifität oder als Attributselektoren in CSS
Der Wert für id ist ein String ohne Leerzeichen. Wenn es ein Leerzeichen enthält, wird das Dokument nicht umgebrochen. Sie müssen jedoch in HTML, CSS und JS mit Escape-Zeichen auf die id verweisen. Alle anderen Zeichen sind zulässig. Ein id-Wert kann 😀 oder .class sein, ist aber keine gute Idee. Um das Programmieren für sich selbst und für die Zukunft zu vereinfachen, sollten Sie als ersten Buchstaben der id einen Buchstaben verwenden und nur ASCII-Buchstaben, Ziffern, _ und - verwenden. Es empfiehlt sich, eine id-Namenskonvention zu entwickeln und sich daran zu halten, da bei id-Werten die Groß- und Kleinschreibung berücksichtigt wird.
Die id muss für das Dokument eindeutig sein. Das Layout Ihrer Seite wird wahrscheinlich nicht beeinträchtigt, wenn ein id mehrmals verwendet wird. Ihre JavaScript-Code-Elemente, Links und Elementinteraktionen funktionieren jedoch möglicherweise nicht wie erwartet.
Link-Fragment-ID
Die Navigationsleiste enthält vier Links. Das Link-Element wird später behandelt. Beachten Sie aber schon jetzt, dass Links nicht auf HTTP-basierte URLs beschränkt sind. Sie können auch Fragment-IDs für Bereiche der Seite im aktuellen Dokument (oder in anderen Dokumenten) sein.
Auf der Website des Machine-Learning-Workshops enthält die Navigationsleiste in der Kopfzeile der Seite vier Links:
Das Attribut „href“ gibt den Hyperlink an, zu dem der Nutzer weitergeleitet wird, wenn er den Link aktiviert. Wenn eine URL ein Rautezeichen (#) gefolgt von einer Zeichenfolge enthält, ist diese Zeichenfolge eine Fragment-ID. Wenn dieser String mit einem id eines Elements auf der Webseite übereinstimmt, ist das Fragment ein Anker oder Lesezeichen für dieses Element. Der Browser scrollt zum Punkt, an dem der Anker definiert ist.
Diese vier Links verweisen auf vier Bereiche unserer Seite, die durch ihr id-Attribut gekennzeichnet sind. Wenn der Nutzer auf einen der vier Links in der Navigationsleiste klickt, wird das Element, das über die Fragment-ID verknüpft ist, also das Element mit der übereinstimmenden ID ohne #, eingeblendet.
Der <main>-Inhalt des Machine-Learning-Workshops hat vier Abschnitte mit IDs. Wenn der Websitebesucher auf einen der Links in der <nav> klickt, wird der Bereich mit dieser Fragment-ID eingeblendet. Das Markup sieht in etwa so aus:
<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>
Wenn Sie die Fragment-IDs in den <nav>-Links vergleichen, stellen Sie fest, dass jede mit der id eines <section> in <main> übereinstimmt.
Der Browser bietet uns einen kostenlosen Link „oben auf der Seite“. Wenn Sie href="#top", „Groß- und Kleinschreibung ignorieren“ oder einfach href="#" festlegen, wird der Nutzer auf die Seite oben gescrollt.
Das Hash-Trennzeichen in href ist kein Teil der Fragment-ID. Die Fragment-ID ist immer der letzte Teil der URL und wird nicht an den Server gesendet.
CSS-Selektoren
In CSS können Sie jeden Abschnitt mit einem ID-Selektor wie #feedback oder, für weniger Spezifizität, mit einem Attributselektor, [id="feedback"], ansteuern.
Skripting
Auf MLW.com gibt es ein Osterei, das nur für Nutzer mit Maus sichtbar ist. Wenn Sie auf den Schalter klicken, wird die Seite ein- und wieder ausgeschaltet.
Das Markup für das Bild des Lichtschalters lautet:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
Das Attribut id kann als Parameter für die Methode getElementById() und mit dem Präfix # als Teil eines Parameters für die Methoden querySelector() und querySelectorAll() verwendet werden.
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Unsere einzige JavaScript-Funktion nutzt diese Möglichkeit, um Elemente anhand ihres id-Attributs auszuwählen:
<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>
Das HTML-Element <label> hat ein for-Attribut, dessen Wert der id des zugehörigen Formularkontrollelements ist.
Wenn Sie ein explizites Label erstellen, indem Sie in jedem Formularkontrollelement ein id einfügen und jedes mit dem for-Attribut des Labels verknüpfen, ist jedes Formularkontrollelement mit einem Label verknüpft.
Jedes Label kann genau einem Formularkontrollelement zugeordnet werden, ein Formularkontrollelement kann jedoch mehrere Labels haben.
Wenn das Formularkontrollelement zwischen dem öffnenden und schließenden <label>-Tag verschachtelt ist, sind die Attribute for und id nicht erforderlich. Dies wird als „implizites“ Label bezeichnet. Labels informieren alle Nutzer darüber, wozu die einzelnen Formularsteuerelemente dienen.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
Durch die Verknüpfung von for und id sind die Informationen für Nutzer von Hilfstechnologien verfügbar. Wenn Sie außerdem irgendwo auf ein Label klicken, wird der Fokus auf das zugehörige Element gelegt und der Klickbereich des Steuerelements erweitert. Das ist nicht nur hilfreich für Menschen mit Feinmotorikstörungen, die das Bewegen des Mauszeigers erschweren, sondern auch für alle Nutzer von Mobilgeräten mit Fingern, die breiter als eine Optionsschaltfläche sind.
In diesem Codebeispiel ist die fünfte Frage eines gefälschten Quiz eine Multiple-Choice-Frage mit Einzelauswahl. Jedes Formularkontrollelement hat ein explizites Label mit einer eindeutigen id. Damit eine ID nicht versehentlich dupliziert wird, ist der ID-Wert eine Kombination aus der Fragenummer und dem Wert.
Bei Optionsfeldern beschreiben die Labels den Wert der Optionsfelder. Daher fassen wir alle Schaltflächen mit demselben Namen in einem <fieldset> zusammen. Das <legend> ist das Label oder die Frage für den gesamten Satz.
Weitere Verwendungen von Bedienungshilfen
Die Verwendung von id im Hinblick auf Barrierefreiheit und Nutzerfreundlichkeit ist nicht auf Labels beschränkt. In der Einführung in Text wurde eine <section> in ein Regionsmarkierungselement umgewandelt, indem der id eines <h2> als Wert für den aria-labelledby der <section> angegeben wurde, um den barrierefreien Namen anzugeben:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Es gibt über 50 aria-*-Zustände und ‑Eigenschaften, mit denen die Barrierefreiheit sichergestellt werden kann. Für aria-labelledby, aria-describedby, aria-details und aria-owns wird als Wert eine zeilenweise durch Leerzeichen getrennte id-Referenzliste verwendet. aria-activedescendant, das das derzeit fokussierte untergeordnete Element identifiziert, hat als Wert eine einzelne id-Referenz: die des Elements, das den Fokus hat (nur ein Element kann gleichzeitig den Fokus haben).
class
Das class-Attribut bietet eine zusätzliche Möglichkeit, Elemente mit CSS (und JavaScript) auszurichten, hat aber in HTML keinen anderen Zweck. Frameworks und Komponentenbibliotheken können es jedoch verwenden. Das Attribut „class“ hat als Wert eine durch Leerzeichen getrennte Liste der klassenspezifischen Klassen für das Element.
Eine solide semantische Struktur ermöglicht das Targeting von Elementen basierend auf ihrem Placement und ihrer Funktion. Die Audiostruktur ermöglicht die Verwendung von Nachkommenelement-, relationalen und Attributselektoren. Überlegen Sie sich beim Lesen dieses Abschnitts, wie Elemente mit denselben Attributen oder Attributwerten gestaltet werden können. Es ist nicht so, dass Sie das Attribut „class“ nicht verwenden sollten. Die meisten Entwickler wissen nur nicht, dass sie es oft nicht brauchen.
Bisher wurden für MLW keine Klassen verwendet. Kann eine Website ohne einen einzelnen Kursnamen gestartet werden? Mal sehen.
style
Mit dem style-Attribut können Inline-Stile angewendet werden. Das sind Stile, die auf das einzelne Element angewendet werden, für das das Attribut festgelegt ist.
Das Attribut style hat als Wert CSS-Eigenschaftswertpaare. Die Syntax des Werts entspricht dem Inhalt eines CSS-Stilblocks: Eigenschaften werden wie in CSS durch einen Doppelpunkt gefolgt und jede Deklaration endet mit einem Semikolon, das nach dem Wert kommt.
Die Stile werden nur auf das Element angewendet, für das das Attribut festgelegt ist. Abgeleitete Elemente übernehmen die übernommenen Eigenschaftswerte, sofern sie nicht durch andere Stildeklarationen in verschachtelten Elementen oder in <style>-Blöcken oder Stylesheets überschrieben werden. Da der Wert dem Inhalt eines einzelnen Style-Blocks entspricht, der nur auf dieses Element angewendet wird, kann er nicht für generierte Inhalte, zum Erstellen von Keyframe-Animationen oder zum Anwenden anderer At-Rules verwendet werden.
style ist zwar ein globales Attribut, wird aber nicht empfohlen. Definieren Sie Stile stattdessen in einer separaten Datei oder in separaten Dateien.
Das style-Attribut kann jedoch während der Entwicklung nützlich sein, um beispielsweise zu Testzwecken schnell ein Styling zu ermöglichen. Fügen Sie dann den Stil „Lösung“ in die verknüpfte CSS-Datei ein.
tabindex
Das tabindex-Attribut kann jedem Element hinzugefügt werden, damit es den Fokus erhält. Der Wert tabindex gibt an, ob das Element der Tabulatorreihenfolge und optional einer benutzerdefinierten Tabulatorreihenfolge hinzugefügt wird.
Das Attribut tabindex nimmt als Wert eine Ganzzahl an. Ein negativer Wert (üblicherweise -1) ermöglicht es einem Element, den Fokus zu erhalten, z. B. über JavaScript, fügt es aber nicht der Tabulatorsequenz hinzu. Wenn der Wert für tabindex 0 ist, kann das Element fokussiert und über die Tabulatortaste erreicht werden. Es wird der Standardtabulatorreihenfolge der Seite in der Quellcodereihenfolge hinzugefügt. Ein Wert von 1 oder höher ordnet das Element einer priorisierten Fokussequenz zu und wird nicht empfohlen.
Auf dieser Seite gibt es eine Freigabefunktion, die ein benutzerdefiniertes <share-action>-Element als <button> verwendet. Die Null für tabindex wird hinzugefügt, um das benutzerdefinierte Element in die Standard-Tabulatorreihenfolge der Tastatur aufzunehmen:
<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>
Das role von button informiert Screenreader-Nutzer darüber, dass sich dieses Element wie eine Schaltfläche verhalten sollte. JavaScript wird verwendet, um die Funktionsweise der Schaltflächen zu gewährleisten. Dazu gehören die Verarbeitung der Ereignisse click und keydown sowie die Verarbeitung von Eingaben der Eingabe- und Leertaste.
Formularelemente, Links, Schaltflächen und bearbeitbare Elemente können den Fokus erhalten. Wenn ein Nutzer die Tabulatortaste drückt, springt der Fokus zum nächsten fokussierbaren Element, als wäre tabindex="0" festgelegt. Andere Elemente können standardmäßig nicht fokussiert werden. Wenn Sie diesen Elementen das Attribut tabindex hinzufügen, können sie den Fokus erhalten, wenn sie ihn sonst nicht erhalten würden.
Wenn ein Dokument Elemente mit einer tabindex von 1 oder mehr enthält, werden sie in einer separaten Tab-Sequenz aufgeführt. Wie Sie im Codepen sehen, beginnt das Tabulatorzeichen in einer separaten Sequenz, in der Reihenfolge vom niedrigsten zum höchsten Wert, bevor es in der regulären Sequenz in der Quellreihenfolge durchgegangen wird.
Eine Änderung der Tabulatorreihenfolge kann die Nutzerfreundlichkeit erheblich beeinträchtigen. Das erschwert die Nutzung von Hilfstechnologien wie Tastaturen und Screenreadern, um sich in Ihren Inhalten zurechtzufinden. Außerdem sind sie für Entwickler schwierig zu verwalten und zu warten. Der Fokus ist wichtig. Es gibt ein ganzes Modul, in dem der Fokus und die Fokusreihenfolge behandelt werden.
role
Das role-Attribut ist Teil der ARIA-Spezifikation und nicht der WHATWG-HTML-Spezifikation. Mit dem role-Attribut können Inhalte semantisch ausgedrückt werden, damit Screenreader Websitenutzer über die erwartete Nutzerinteraktion eines Objekts informieren können.
Es gibt einige gängige UI-Widgets wie Drop-down-Listen, Menübalken, Tabellenlisten und Baumraster, die kein natives HTML-Äquivalent haben.
Wenn Sie beispielsweise ein Tab-Designmuster erstellen, können Sie die Rollen tab, tablist und tabpanel verwenden. Jemand, der die Benutzeroberfläche sehen kann, hat durch Erfahrung gelernt, wie er sich im Widget bewegt und verschiedene Bereiche sichtbar macht, indem er auf die zugehörigen Tabs klickt.
Wenn Sie die Rolle tab mit <button role="tab"> kombinieren, wenn eine Gruppe von Schaltflächen verwendet wird, um verschiedene Bereiche anzuzeigen, wird der Screenreader-Nutzer darüber informiert, dass die <button>, die derzeit den Fokus hat, einen zugehörigen Bereich ein- und ausblenden kann, anstatt eine typische Schaltflächenfunktion zu implementieren.
Das role-Attribut ändert weder das Browserverhalten noch die Interaktionen mit Tastatur oder Zeigegerät. Wenn Sie role="button" zu <span> hinzufügen, wird daraus kein <button>. Deshalb wird empfohlen, semantische HTML-Elemente für den vorgesehenen Zweck zu verwenden. Wenn die Verwendung des richtigen Elements jedoch nicht möglich ist, können Nutzer von Screenreadern über das role-Attribut darüber informiert werden, dass ein nicht semantisches Element in die Rolle eines semantischen Elements eingebaut wurde.
contenteditable
Ein Element, für das das contenteditable-Attribut auf true festgelegt ist, kann bearbeitet und fokussiert werden und wird der Tab-Reihenfolge hinzugefügt, als wäre tabindex="0" festgelegt. Contenteditable ist ein Aufzählungsattribut, das die Werte true und false unterstützt. Der Standardwert ist inherit, wenn das Attribut nicht vorhanden ist oder einen ungültigen Wert hat.
Diese drei Eröffnungs-Tags sind äquivalent:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Wenn Sie <style contenteditable="false"> angeben, kann das Element nicht bearbeitet werden, es sei denn, es ist standardmäßig bearbeitbar, z. B. ein <textarea>. Ist der Wert ungültig, z. B. <style contenteditable="😀"> oder <style contenteditable="contenteditable">, wird standardmäßig inherit verwendet.
Wenn Sie zwischen den Status wechseln möchten, fragen Sie den Wert des schreibgeschützten Attributs HTMLElement.isContentEditable ab.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Alternativ können Sie diese Eigenschaft angeben, indem Sie editor.contentEditable auf true, false oder inherit festlegen.
Globale Attribute können auf alle Elemente angewendet werden, auch auf <style>-Elemente. Mithilfe von Attributen und etwas CSS können Sie einen Live-CSS-Editor erstellen.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Versuche, die color des style in etwas anderes als inherit zu ändern. Versuche dann, die style-Auswahl in eine p-Auswahl zu ändern.
Entfernen Sie die Displayeigenschaft nicht, da sonst der Style-Block verschwindet.
Benutzerdefinierte Attribute
Wir haben nur die Oberfläche der globalen HTML-Attribute angekratzt. Es gibt noch mehr Attribute, die nur auf ein oder eine begrenzte Anzahl von Elementen zutreffen. Auch wenn Hunderte von Attributen definiert sind, benötigen Sie möglicherweise ein Attribut, das nicht in der Spezifikation enthalten ist. HTML ist die Lösung.
Sie können beliebige benutzerdefinierte Attribute erstellen, indem Sie das Präfix data- hinzufügen. Sie können dem Attribut einen beliebigen Namen geben, der mit data- beginnt und gefolgt wird von einer Reihe von Kleinbuchstaben, die nicht mit xml beginnen und keinen Doppelpunkt (:) enthalten.
HTML ist fehlertolerant und funktioniert auch dann, wenn Sie nicht unterstützte Attribute erstellen, die nicht mit data beginnen, oder wenn Sie Ihr benutzerdefiniertes Attribut mit xml beginnen oder : enthalten. Es gibt jedoch Vorteile, gültige benutzerdefinierte Attribute zu erstellen, die mit data- beginnen.
Bei benutzerdefinierten Datenattributen können Sie sicher sein, dass Sie nicht versehentlich einen vorhandenen Attributnamen verwenden. Benutzerdefinierte Datenattribute sind zukunftssicher.
In Browsern werden keine Standardverhalten für Attribute mit dem Präfix data- implementiert. Es gibt jedoch eine integrierte Dataset API, mit der Sie Ihre benutzerdefinierten Attribute durchgehen können. Benutzerdefinierte Properties sind eine hervorragende Möglichkeit, anwendungsspezifische Informationen über JavaScript zu senden. Fügen Sie Elementen benutzerdefinierte Attribute in Form von data-name hinzu und greifen Sie über das DOM mit dataset[name] auf das betreffende Element zu.
<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>
Sie können getAttribute() mit dem vollständigen Attributnamen verwenden oder die einfachere Property dataset nutzen.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
Die dataset-Eigenschaft gibt ein DOMStringMap-Objekt mit den data--Attributen jedes Elements zurück. Für die <blockquote> gibt es mehrere benutzerdefinierte Attribute. Dank der Datensatzeigenschaft müssen Sie nicht wissen, welche benutzerdefinierten Attribute das sind, um auf ihre Namen und Werte zuzugreifen:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Die Attribute in diesem Artikel sind global, d. h., sie können auf jedes HTML-Element angewendet werden. Allerdings wirken sich nicht alle auf diese Elemente aus. Als Nächstes sehen wir uns die beiden Attribute aus dem Einführungsbild an, die wir noch nicht erwähnt haben: target und href. Außerdem gehen wir auf einige andere elementspezifische Attribute ein, wenn wir uns Links genauer ansehen.
Wissen testen
Testen Sie Ihr Wissen über Attribute.
Eine id sollte im Dokument eindeutig sein.
Wählen Sie das korrekt formatierte benutzerdefinierte Attribut aus.
data-birthdaybirthdaydata:birthday