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 kerakdataset, 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:
html<div id="elem" data-num="1000"></div>
Uning data-num atributi qiymatini ekranga chiqaramiz:
javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 ni chiqaradi
Endi bu atributga boshqa qiymat belgilaymiz:
javascriptlet elem = document.querySelector('#elem');
elem.dataset.num = 123;
Quyidagi kod berilgan:
html<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:
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>
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:
html<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:
html<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.