Anpassade attribut i JavaScript

I HTML är det tillåtet att lägga till egna, anpassade attribut till taggar. Sådana attribut måste börja med data-, följt av vilket attributnamn som helst som passar dig.

Anpassade attribut kan användas på ett enormt antal olika sätt. Många av dessa sätt kommer vi att studera senare i handboken, och ännu fler kommer du att kunna uppfinna på egen hand.

Åtkomst till sådana attribut fungerar på ett icke-standardiserat sätt. Man kan inte bara komma åt elementets egenskap med samma namn, som vi gjorde tidigare, utan måste använda en speciell egenskap dataset, efter vilket punkt skrivs attributets namn utan data-. Till exempel, om vårt attribut heter data-test, då för att komma åt det skriver vi elem.dataset.test, där elem är variabeln med vårt element.

Låt oss titta på ett exempel. Låt oss säga att vi har följande element:

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

Låt oss visa värdet på dess attribut data-num på skärmen:

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

Och nu tilldelar vi detta attribut ett annat värde:

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

Följande kod ges:

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

Gör så att när man klickar på div:en läggs innehållet i dess attribut data-text till slutet av dess text.

Det finns div:ar som innehåller sitt ordningsnummer i attributet 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å att när man klickar på någon av div:arna skrivs dess ordningsnummer i slutet av den.

En knapp ges. Gör så att denna knapp räknar antalet klick på sig, genom att skriva dem i något anpassat attribut. Låt att när man klickar på en annan knapp visas på skärmen hur många klick som gjorts på den första knappen.

En input ges:

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

I denna input innehåller attributet data-length antalet tecken som behöver matas in i input:en. Gör så att när den förlorar fokus, om antalet inmatade tecken inte stämmer överens med det angivna, visas ett meddelande om detta.

En input ges:

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

I denna input innehåller attributen data-min och data-max ett intervall. Gör så att när den förlorar fokus, om antalet inmatade tecken inte faller inom detta intervall, visas ett meddelande om detta.