JavaScript-de Ulanyjy atributlary

HTML-de öz, ulanyjy atributlaryny taglara goşmaga rugsat berilýär. Şeýle atributlar data- bilen başamaly we soňra size amatly bolan islendik atlandyryş bolup biler.

Ulanyjy atributlar dürli usullaryň uly sany ulanylyp bilner. Bu usullaryň köpüsini okuw gollanmasynyň dowamynda öwreneris, has köpüsini bolsa soňra özüňiz oýlap tapyp bilersiňiz.

Şeýle atributlara çykmak adaty däldir. Öň etdigimiz ýaly, elementleriň şol atdaky aýratynlygyna ýönekeý çykmak mümkin däl, eýsem, aýratyn aýratynlyk dataset ulanylmagy hökmanydyr, soňundan nokatdan soň data- bolmadyk atributyň ady ýazylýar. Mysal üçin, atributymyz data-test diýilýän bolsa, onda oňa çykmak üçin biz elem.dataset.test ýazarys, elem - biziň elementimiziň üýtgeýjisi.

Mysalda göreliň. Geliň diňe bir element bolsun:

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

Ekrana onuň data-num atributynyň bahasyny çykaraýaly:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 çykarar

Indi bu atributa başga bir baha bereliň:

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

Aşakdaky kod berlen:

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

Div-a basylganda, onuň tekstiniň ahyryna onuň data-text atributynyň mazmunyny goşuň.

data-num atributynda öz tertip belgisini saklaýan divlar berlen:

<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>

Her bir div-a basylganda, onuň ahyryna onuň tertip belgisi ýazylmaly.

Düwme berlen. Bu düwme özüne basylan sany sanap, ony islendik bir ulanyjy atributynda ýazmaly. Beýleki bir düwmä basylganda, ekrana birinci düwmä näçe gezek basylanlygy çykmaly.

Input berlen:

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

Bu inputda data-length atributynda inputa girizilmeli nyşanlaryň sany bar. Fokus ýitirilende, girizilen nyşanlaryň sany berlen bilen gabat gelmese, bu barada habar çykmagyny ýerine ýetiriň.

Input berlen:

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

Bu inputda data-min we data-max atributlarynda diapazon bar. Fokus ýitirilende, girizilen nyşanlaryň sany bu diapozon içine düşmese, bu barada habar çykmagyny ýerine ýetiriň.