Benutzerdefinierte Attribute in JavaScript
In HTML ist es erlaubt, eigene, benutzerdefinierte
Attribute zu Tags hinzuzufügen. Solche Attribute müssen mit
data- beginnen, gefolgt von einem beliebigen
Attributnamen, der für Sie praktisch ist.
Benutzerdefinierte Attribute können auf eine enorme Vielzahl verschiedener Arten verwendet werden. Viele dieser Arten werden wir später im Lehrgang lernen, und noch mehr werden Sie später selbst erfinden können.
Der Zugriff auf solche Attribute ist nicht standardmäßig
organisiert. Man kann nicht einfach auf eine gleichnamige
Eigenschaft des Elements zugreifen, wie wir es früher
getan haben,
sondern sollte die spezielle Eigenschaft
dataset verwenden, nach der durch einen Punkt
der Name des Attributs ohne data- geschrieben wird. Zum Beispiel,
wenn unser Attribut data-test heißt,
dann schreiben wir für den Zugriff darauf elem.dataset.test,
wo elem die Variable mit unserem Element ist.
Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben dieses Element:
<div id="elem" data-num="1000"></div>
Lassen Sie uns den Wert seines Attributs data-num ausgeben:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // gibt 1000 aus
Und jetzt weisen wir diesem Attribut einen anderen Wert zu:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Gegeben ist der folgende Code:
<div id="elem" data-text="str">text</div>
Sorgen Sie dafür, dass bei einem Klick auf die Div-Box an das Ende
ihres Textes der Inhalt ihres Attributs
data-text angehängt wird.
Es sind Div-Boxen gegeben, die in ihrem Attribut data-num
ihre Ordnungsnummer enthalten:
<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
Sorgen Sie dafür, dass bei einem Klick auf eine beliebige Div-Box an ihr Ende ihre Ordnungsnummer geschrieben wird.
Ein Button ist gegeben. Sorgen Sie dafür, dass dieser Button die Anzahl der Klicks auf ihn zählt, indem er sie in ein benutzerdefiniertes Attribut schreibt. Sorgen Sie dafür, dass bei einem Klick auf einen anderen Button auf dem Bildschirm ausgegeben wird, wie viele Klicks auf den ersten Button gemacht wurden.
Ein Input-Feld ist gegeben:
<input id="elem" data-length="5">
In diesem Input-Feld enthält das Attribut data-length
die Anzahl der Zeichen, die in das Input-Feld eingegeben werden müssen.
Sorgen Sie dafür, dass beim Verlust des
Fokus, wenn die Anzahl der eingegebenen Zeichen
nicht mit der vorgegebenen übereinstimmt, eine Meldung
dazu ausgegeben wird.
Ein Input-Feld ist gegeben:
<input id="elem" data-min="5" data-max="10">
In diesem Input-Feld enthalten die Attribute data-min und
data-max einen Bereich. Sorgen Sie
dafür, dass beim Verlust des Fokus, wenn die Anzahl
der eingegebenen Zeichen nicht in diesen Bereich fällt,
eine Meldung dazu ausgegeben wird.
