Atribute personalizate în JavaScript

În HTML este permis să adăugați propriile dvs., atribute personalizate elementelor. Astfel de atribute trebuie să înceapă cu data-, iar apoi poate urma orice nume de atribut care vă este convenabil.

Atributele personalizate pot fi utilizate într-o multitudine de moduri diferite. Multe dintre aceste metode le vom studia mai departe în tutorial, iar și mai multe le veți putea inventa în continuare pe cont propriu.

Accesarea la astfel de atribute nu este organizată în mod standard. Nu se poate accesa pur și simplu la o proprietate cu același nume a elementului, așa cum am făcut anterior, ci trebuie utilizată o proprietate specială dataset, după care prin punct se scrie numele atributului fără data-. De exemplu, dacă atributul nostru se numește data-test, atunci pentru a accesa la el vom scrie elem.dataset.test, unde elem este variabila cu elementul nostru.

Să ne uităm la un exemplu. Să presupunem că avem dat următorul element:

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

Să afișăm pe ecran valoarea atributului său data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // va afișa 1000

Și acum să atribuim acestui atribut o altă valoare:

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

Este dat următorul cod:

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

Faceți ca la click pe div să se adauge la sfârșitul textului său conținutul atributului său data-text.

Sunt date div-uri, conținând în atributul data-num numărul lor de ordine:

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

Faceți ca la click pe oricare dintre div-uri să i se scrie la sfârșit numărul său de ordine.

Este dat un buton. Faceți ca acest buton să numere cantitatea de click-uri pe el, scriindu-le într-un atribut personalizat. La click pe un alt buton să se afișeze pe ecran câte click-uri au fost făcute pe primul buton.

Este dat un input:

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

În acest input, în atributul data-length este conținută cantitatea de caractere care trebuie introdusă în input. Faceți ca la pierderea focusului, dacă cantitatea de caractere introduse nu coincide cu cea setată, să se afișeze un mesaj despre aceasta.

Este dat un input:

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

În acest input, atributele data-min și data-max conțin un interval. Faceți ca la pierderea focusului, dacă cantitatea de caractere introduse nu se încadrează în acest interval, să se afișeze un mesaj despre aceasta.