Потребителски атрибути в JavaScript

В HTML е разрешено да се добавят собствени, потребителски атрибути към таговете. Такива атрибути трябва да започват с data-, а след това може да има всяко име на атрибут, което ви е удобно.

Потребителските атрибути могат да се използват по огромен брой различни начини. Много от тези начини ще изучим по-нататък в урока, а още повече ще можете да измислите самостоятелно в бъдеще.

Достъпът до такива атрибути не е стандартен. Не може просто да се достъпи свойството на елемента със същото име, както правехме преди, а трябва да се използва специално свойство dataset, след което чрез точка се пише името на атрибута без data-. Например, ако нашият атрибут се казва data-test, тогава за достъп до него ще пишем elem.dataset.test, където elem е променливата с нашия елемент.

Нека да разгледаме пример. Нека имаме следния елемент:

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

Нека изведем на екрана стойността на неговия атрибут data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // ще изведе 1000

А сега нека присвоим на този атрибут друга стойност:

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

Даден е следният код:

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

Направете така, че при кликване върху div в края на неговия текст да се добави съдържанието на неговия атрибут data-text.

Дадени са div елементи, съдържащи в атрибута 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>

Направете така, че при кликване върху който и да е от div елементите, в неговия край да се запише неговият пореден номер.

Дадено е бутон. Направете така, че този бутон да брои кликовете върху него, като ги записва в някакъв потребителски атрибут. Нека при кликване на друг бутон на екрана да се извежда колко клика са били направени върху първия бутон.

Дадено е input поле:

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

В това input поле в атрибута data-length се съдържа броят символи, които трябва да се въведат в полето. Направете така, че при загуба на фокус, ако броят на въведените символи не съвпада с зададения, да се извежда съобщение за това.

Дадено е input поле:

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

В това input поле атрибутите data-min и data-max съдържат диапазон. Направете така, че при загуба на фокус, ако броят на въведените символи не попадне в този диапазон, да се извежда съобщение за това.