Gebruikerkenmerke in JavaScript

In HTML is dit toegelaat om jou eie, gebruiker-gedefinieerde kenmerke by etikette te voeg. Sulke kenmerke moet begin met data-, en dan kan enige kenmerknaam volg wat vir jou gerieflik is.

Gebruikerkenmerke kan op 'n groot aantal verskillende maniere gebruik word. Baie van hierdie metodes sal ons later in die handleiding bestudeer, en nog meer sal jy in die toekoms self kan uitvind.

Die manier om na sulke kenmerke te verwys is nie standaard nie. Jy kan nie net na die ooreenstemmende eienskap van die element verwys soos ons voorheen gedoen het nie, maar moet die spesiale eienskap dataset gebruik, waarna die kenmerknaam sonder data- geskryf word na 'n punt. Byvoorbeeld, as ons kenmerk data-test genoem word, dan sal ons elem.dataset.test skryf om daarna te verwys, waar elem die veranderlike met ons element is.

Kom ons kyk na 'n voorbeeld. Laat ons aanneem ons het die volgende element:

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

Laat ons die waarde van sy kenmerk data-num na die skerm uitvoer:

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

En laat ons nou 'n ander waarde aan hierdie kenmerk toeken:

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

Die volgende kode word gegee:

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

Maak so dat met 'n klik op die div, die inhoud van sy kenmerk data-text aan die einde van sy teks gevoeg word.

Divs word gegee, wat hul volgnommer in die kenmerk data-num bevat:

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

Maak so dat met 'n klik op enige van die divs, sy volgnommer aan die einde daarvan geskryf word.

'n Knoppie word gegee. Maak so dat hierdie knoppie die aantal kere wat daarop geklik word tel, deur dit in 'n of ander gebruikerkenmerk neer te skryf. Laat 'n ander knoppie, wanneer daarop geklik word, die aantal kere wat op die eerste knoppie geklik is, op die skerm vertoon.

'n Invoerveld word gegee:

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

In hierdie invoerveld bevat die kenmerk data-length die aantal karakters wat in die invoerveld ingevoer moet word. Maak so dat wanneer die fokus verloor word, indien die aantal ingevoerde karakters nie ooreenstem met die gespesifiseerde aantal nie, 'n boodskap hiervoor vertoon word.

'n Invoerveld word gegee:

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

In hierdie invoerveld bevat die kenmerke data-min en data-max 'n reeks. Maak so dat wanneer die fokus verloor word, indien die aantal ingevoerde karakters nie in hierdie reeks val nie, 'n boodskap hiervoor vertoon word.