Aangepaste attributen in JavaScript

In HTML is het toegestaan om uw eigen, aangepaste attributen aan tags toe te voegen. Dergelijke attributen moeten beginnen met data-, gevolgd door een willekeurige attribuutnaam die u geschikt vindt.

Aangepaste attributen kunnen op een groot aantal verschillende manieren worden gebruikt. Veel van deze manieren zullen we later in de zelfstudie bestuderen, en nog meer zult u in de toekomst zelf kunnen bedenken.

De toegang tot dergelijke attributen is niet op een standaard manier geregeld. U kunt niet eenvoudigweg toegang krijgen tot de eigenschap van het element met dezelfde naam, zoals we eerder deden. In plaats daarvan moet u de speciale eigenschap dataset gebruiken, waarna de naam van het attribuut zonder data- wordt geschreven. Bijvoorbeeld, als ons attribuut data-test heet, dan schrijven we elem.dataset.test om er toegang toe te krijgen, waarbij elem de variabele met ons element is.

Laten we een voorbeeld bekijken. Stel dat we het volgende element hebben:

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

Laten we de waarde van zijn attribuut data-num op het scherm weergeven:

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

En laten we nu een andere waarde aan dit attribuut toekennen:

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

Задание 1

Gegeven de volgende code:

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

Zorg ervoor dat bij een klik op de div aan het einde van zijn tekst de inhoud van zijn attribuut data-text wordt toegevoegd.

Задание 2

Er zijn div's die in hun attribuut data-num hun volgnummer bevatten:

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>

Zorg ervoor dat bij een klik op een willekeurige div zijn volgnummer aan het einde wordt geschreven.

Задание 3

Er is een knop. Zorg ervoor dat deze knop het aantal klikken erop bijhoudt door ze in een aangepast attribuut te schrijven. Laat bij een klik op een andere knop op het scherm worden weergegeven hoeveel klikken er op de eerste knop zijn gedaan.

Задание 4

Gegeven een invoerveld:

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

In dit invoerveld bevat het attribuut data-length het aantal in te voeren tekens. Zorg ervoor dat bij verlies van focus, als het aantal ingevoerde tekens niet overeenkomt met het opgegeven aantal, een bericht hierover wordt weergegeven.

Задание 5

Gegeven een invoerveld:

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

In dit invoerveld bevatten de attributen data-min en data-max een bereik. Zorg ervoor dat bij verlies van focus, als het aantal ingevoerde tekens niet binnen dit bereik valt, een bericht hierover wordt weergegeven.