Atributet e Përdoruesit në JavaScript

Në HTML lejohet të shtoni atributet tuaja, të personalizuara të etiketave. Atribute të tillë duhet të fillojnë me data-, dhe më pas mund të vijë çdo emër atributi që ju përshtatet.

Atributet e përdoruesit mund të përdoren në një numër të madh mënyrash të ndryshme. Shumë nga këto mënyra do t'i studiojmë më vonë në tutorial, dhe edhe më shumë ju do të jeni në gjendje t'i shpikni vetë në të ardhmen.

Qasja te atribute të tillë nuk është e standardizuar. Nuk mund thjesht të qasemi te vetia me të njëjtin emër të elementit, siç kemi bërë më parë, por duhet të përdorim një veti të veçantë dataset, pas së cilës përmes një pike shkruhet emri i atributit pa data-. Për shembull, nëse atributi ynë quhet data-test, atëherë për t'u referuar atij do të shkruajmë elem.dataset.test, ku elem është variabla me elementin tonë.

Le të shohim një shembull. Le të themi se kemi këtë element:

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

Le të shfaqim në ekran vlerën e atributit të tij data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // do të shfaqë 1000

Dhe tani le t'i caktojmë këtij atributi një vlerë tjetër:

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

Është dhënë kodi në vijim:

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

Bëni që me klikim në div, në fund të tekstit të tij të shtohet përmbajtja e atributit të tij data-text.

Janë dhënë div-et, që përmbajnë në atributin data-num numrin e tyre rendor:

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

Bëni që me klikim në cilindo nga div-et, në fund të tij të shkruhet numri i tij rendor.

Është dhënë një buton. Bëni që ky buton të numërojë numrin e klikimeve mbi të, duke i shkruar ato në ndonjë atribut të përdoruesit. Le të themi që me klikim në një buton tjetër në ekër të shfaqet sa klikime janë bërë në butonin e parë.

Është dhënë një input:

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

Në këtë input, në atributin data-length përmbahet numri i karaktereve që duhet të shkruhen në input. Bëni që me humbjen e fokusit, nëse numri i karaktereve të shkruar nuk përputhet me atë të caktuar, të shfaqet një mesazh për këtë.

Është dhënë një input:

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

Në këtë input, atributet data-min dhe data-max përmbajnë një interval. Bëni që me humbjen e fokusit, nëse numri i karaktereve të shkruar nuk bie brenda këtij intervali, të shfaqet një mesazh për këtë.