JavaScriptте колдонуучу атрибуттары

HTMLте өзүңүздүн, колдонуучунун атрибуттарын тегдерге кошууга уруксат берилет. Мындай атрибуттар data- менен баштоосу керек, андан кийин сизге ыңгайлуу болгон атрибуттун каалаган аталышы келиши керек.

Колдонуучу атрибуттары ар кандай жолдор менен көптөгөн жолдор менен колдонулушу мүмкүн. Бул жолдордун көбүн биз кийинчерээк окуу куралында үйрөнөбүз, андан ары сиз өзүңүз көбүрөөк ойлоп таба аласыз.

p> Мындай атрибуттарга кайрылуу стандарттуу эмес жол менен уюштурулган. Мурун биз кылганыбыздай, элементтин ошол эле аталыштагы касиетине жөнөкөй эле кайрылууга болбойт, анын ордуна атайын касиетти 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 атрибуттары диапазонду камтыйт. Фокусту жоготкондо, эгер киргизилген символдордун саны ушул диапазонго түшпөсө, анда бул жөнүндө кабар чыгарылсын кылыңыз.