Sifa za Mtumiaji katika JavaScript

Katika HTML inaruhusiwa kuongeza sifa zako, za mtumiaji kwa vitambulisho. Sifa kama hizi zinapaswa kuanza kwa data-, kisha inafuatwa na jina lolote la sifa ambalo linafaa kwako.

Sifa za mtumiaji zinaweza kutumiwa kwa njia nyingi tofauti. Baadhi ya njia hizi tutazisoma zaidi katika mwongozo, na zaidi utaweza kubuni binafsi baadaye.

Kurejelea sifa kama hizi hakufanyiki kwa kawaida. Haiwezekani kurejelea tu sifa ya kipengele chenye jina sawa, kama tulivyofanya awali, lakini inapaswa kutumia sifa maalum dataset, baada ya hapo kupitia nukta inaandikwa jina la sifa bila data-. Kwa mfano, kama sifa yetu inaitwa data-test, basi kurejelea kwake tutaandika elem.dataset.test, ambapo elem - kutofautiana na kipengele chetu.

Wacha tuangalie kwa mfano. Hebu tuseme tuna kipengele kama hiki:

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

Wacha tuonyeshe kwenye skrini thamani ya sifa yake data-num:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // itaonyesha 1000

Sasa tuweke thamani tofauti kwa sifa hii:

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

Задание 1

Imetolewa msimbo ufuatao:

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

Fanya ili kwa kubofya kwenye div mwisho wa maandishi yake yanaongezwa yaliyomo ya sifa yake data-text.

Задание 2

Imetolewa div, zilizo na kwenye sifa data-num nambari yake ya mlolongo:

html<div data-num="1">maandishi</div>
<div data-num="2">maandishi</div>
<div data-num="3">maandishi</div>
<div data-num="4">maandishi</div>
<div data-num="5">maandishi</div>

Fanya ili kwa kubofya kwenye yoyote ya div nambari yake ya mlolongo iandikwe mwishoni.

Задание 3

Imetolewa kitufe. Fanya ili kitufe hiki kihesabu idadi ya kubofya kwake, ikiwaandika kwenye sifa fulani za mtumiaji. Hebu kwa kubofya kwenye kitufe kingine kwenye skrini ionyeshe, ni kubofya ngapi zilifanyika kwenye kitufe cha kwanza.

Задание 4

Imetolewa ingizo:

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

Katika ingizo hili kwenye sifa data-length kuna idadi ya herufi, ambazo zinahitajika kuingizwa kwenye ingizo. Fanya ili kwa kupoteza umakini, ikiwa idadi ya herufi zilizoingizwa hazingani na zilizowekwa, ujumbe wa huo utoke.

Задание 5

Imetolewa ingizo:

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

Katika ingizo hili sifa data-min na data-max zina mbalimbali. Fanya ili kwa kupoteza umakini, ikiwa idadi ya herufi zilizoingizwa haizingii kwenye mbalimbali hii, ujumbe wa huo utoke.