Օգտագործողի հատկացված ատրիբուտները 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>

Կատարեք այնպես, որ ցանկացած դիվի վրա կտտացնելուց նրա վերջում գրվի իր հերթական համարը:

Տրված է կոճակ: Կատարեք այնպես, որ այս կոճակը hաշվածի դրա վրա արված կտտոցների քանակը, գրառելով դրանք ինչ-որ օգտագործողի հատկացված ատրիբուտում: Թող մեկ այլ կոճակի վրա կտտացնելուց էկրանին արտածվի, թե քանի կտտոց է արվել առաջին կոճակի վրա:

Տրված է ինփուտ.

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

Այս ինփուտում data-length ատրիբուտում պարունակվում է նիշերի այն քանակը, որը պետք է մուտքագրվի ինփուտում: Կատարեք այնպես, որ ֆոկուսը կորցնելուց, եթե մուտքագրված նիշերի քանակը չի համընկնում նշվածի հետ, արտածվի դրա մասին հաղորդագրություն:

Տրված է ինփուտ.

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

Այս ինփուտում data-min և data-max ատրիբուտները պարունակում են տիրույթ: Կատարեք այնպես, որ ֆոկուսը կորցնելուց, եթե մուտքագրված նիշերի քանակը չի ընկնում այս տիրույթի մեջ, արտածվի դրա մասին հաղորդագրություն: