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:

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

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

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

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

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

Følgende kode er givet:

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

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

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

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.

Der gives et inputfelt:

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

Der gives et inputfelt:

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