Атрибутҳои фардии корбар дар 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 дода шудааст:
<input id="elem" data-min="5" data-max="10">
Дар ин input атрибутҳои data-min ва
data-max диапазонро дар бар мегиранд. Чунон кунед,
ки пас аз гум кардани фокуси назар, агар шумораи
аломатҳои воридшуда ба ин диапазон дарнаёяд,
паёме дар бораи ин чоп шавад.
