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>

Дивга босилганда, унинг матнининг охирига унинг data-text атрибутининг мазмуни қўшилишини таъминланг.

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>

Ҳар қандай дивга босилганда, унинг охирига унинг тартиб рақами ёзилишини таъминланг.

Тугма берилган. Ушбу тугма унга босилганлар сонини ҳисоблашини таъминланг, уларни қандайдир фойдаланувчи атрибутига ёзиб борган ҳолда. Бошқа бир тугмага босилганда, экранга биринчи тугмага неча марта босилгани чиқарилсин.

Инпут берилган:

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

Ушбу инпутда data-length атрибутида инпутга киритилиши керак бўлган белгилар сони мавжуд. Фокус йўқотилганда, агар киритилган белгилар сони белгиланганга мос келмаса, бу ҳақда хабар чиқарилишини таъминланг.

Инпут берилган:

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

Ушбу инпутда data-min ва data-max атрибутлари диапозонни ўз ичига олган. Фокус йўқотилганда, агар киритилган белгилар сони ушбу диапозонга тўғри келмаса, бу ҳақда хабар чиқарилишини таъминланг.