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 атрибуттарында диапазон бар.
Фокустан шыққан кезде, егер енгізілген таңбалар саны
осы диапазонға сәйкес келмесе,
сол туралы хабар шығарылатын етіп жасаңыз.
