Brugerdefinerede attributter i JavaScript

I HTML er det tilladt at tilføje egne, brugerdefinerede attributter til tags. Sådanne attributter skal starte med data-, og efterfølgende kan der komme ethvert attributnavn, som du finder passende.

Brugerdefinerede attributter kan bruges på en enorm mængde forskellige måder. Mange af disse metoder vil vi studere senere i vejledningen, og endnu flere vil du selv kunne opfinde i fremtiden.

Adgangen til sådanne attributter er ikke organiseret på en standard måde. Man kan ikke blot henvise til elementets egenskab med samme navn, som vi gjorde tidligere. I stedet skal man bruge en speciel egenskab dataset, hvorefter man gennem et punktum skriver attributtets navn uden data-. For eksempel, hvis vores attribut hedder data-test, skal vi for at henvise til den skrive elem.dataset.test, hvor elem er variablen med vores element.

Lad os se på et eksempel. Antag, at vi har følgende element:

html<div id="elem" data-num="1000"></div>

Lad os vise værdien af dens attribut data-num på skærmen:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // vil vise 1000

Og lad os nu tildele en anden værdi til denne attribut:

javascriptlet elem = document.querySelector('#elem');
elem.dataset.num = 123;

Задание 1

Følgende kode er givet:

html<div id="elem" data-text="str">text</div>

Gør så, at når der klikkes på div'en, vil indholdet af dens attribut data-text blive tilføjet til slutningen af dens tekst.

Задание 2

Der gives div'er, der indeholder deres rækkenummer i attributten data-num:

html<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>

Gør så, at når der klikkes på en hvilken som helst af div'erne, vil dens rækkenummer blive skrevet i slutningen af den.

Задание 3

Der gives en knap. Gør så, at denne knap tæller antallet af klik på den, ved at gemme dem i en eller anden brugerdefineret attribut. Lad det ved et klik på en anden knap blive vist på skærmen, hvor mange klik der var foretaget på den første knap.

Задание 4

Der gives et inputfelt:

html<input id="elem" data-length="5">

I dette inputfelt indeholder attributten data-length antallet af tegn, der skal indtastes i inputfeltet. Gør så, at ved tab af fokus, hvis antallet af indtastede tegn ikke matcher det angivne antal, vil der blive vist en besked om dette.

Задание 5

Der gives et inputfelt:

html<input id="elem" data-min="5" data-max="10">

I dette inputfelt indeholder attributterne data-min og data-max et interval. Gør så, at ved tab af fokus, hvis antallet af indtastede tegn ikke falder inden for dette interval, vil der blive vist en besked om dette.