JavaScript-da Foydalanuvchi Atributlari

HTML-da o'zingizning, foydalanuvchi atributlaringizni teglarga qo'shishga ruxsat berilgan. Bunday atributlar data- bilan boshlanishi kerak, shundan so'ng sizga qulay bo'lgan har qanday atribut nomi kelishi mumkin.

Foydalanuvchi atributlari juda ko'p turli usullarda qo'llanilishi mumkin. Ushbu usullarning ko'pini keyinroq o'rganamiz o'quv qo'llanmada, yana ko'plarini keyinchalik o'zingiz ixtiro qilishingiz mumkin.

p> Bunday atributlarga murojaat qilish standart usulda tashkil etilmagan. Ilgari qilganimizdek, elementning o'xshash nomdagi xususiyatiga oddiygina murojaat qilib bo'lmaydi, balki maxsus xususiyatdan foydalanish kerak dataset, undan keyin nuqta orqali atribut nomi data- siz yoziladi. Masalan, agar bizning atributimiz data-test deb nomlangan bo'lsa, unga murojaat qilish uchun biz elem.dataset.test deb yozamiz, bu yerda elem - bizning elementimiz bilan o'zgaruvchi.

Keling, misol orqali ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi element berilgan:

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

Uning data-num atributi qiymatini ekranga chiqaramiz:

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

Endi bu atributga boshqa qiymat belgilaymiz:

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

Quyidagi kod berilgan:

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

Divga bosilganda uning matnining oxiriga uning data-text atributi tarkibi qo'shiladigan qiling.

data-num atributida o'zining tartib raqamini o'z ichiga olgan divlar berilgan:

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

Har qanday divga bosilganda uning oxiriga uning tartib raqami yoziladigan qiling.

Tugma berilgan. Ushbu tugma unga bosishlar sonini hisoblab, ularni qandaydir foydalanuvchi atributiga yozadigan qiling. Boshqa tugmani bosishda ekranga birinchi tugma bo'yicha nechta bosish amalga oshirilgani chiqsin.

Input berilgan:

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

Ushbu inputda data-length atributida inputga kiritilishi kerak bo'lgan belgilar soni mavjud. Fokus yo'qotilganda, agar kiritilgan belgilar soni belgilangan songa mos kelmasa, bu haqda xabar chiqadigan qiling.

Input berilgan:

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

Ushbu inputda data-min va data-max atributlari diapazonni o'z ichiga oladi. Fokus yo'qotilganda, agar kiritilgan belgilar soni ushbu diapazonga to'g'ri kelmasa, bu haqda xabar chiqadigan qiling.