Egyéni attribútumok a JavaScriptben

A HTML-ben megengedett saját, egyéni attribútumok hozzáadása a címkékhez. Az ilyen attribútumoknak data--el kell kezdődniük, majd bármilyen attribútumnév következhet, ami számodra kényelmes.

Az egyéni attribútumok rengeteg különböző módon használhatók. Sok ilyen módszert a továbbiakban tanulmányozunk az oktatóanyagban, és még többet találhatsz ki önállóan a jövőben.

Az ilyen attribútumokhoz való hozzáférés nem szabványos módon történik. Nem lehet egyszerűen hozzáférni az elem azonos nevű tulajdonságához, ahogy azt korábban tettük, hanem egy speciális tulajdonságot kell használni dataset, ami után ponttal az attribútum neve van írva data- nélkül. Például, ha az attribútumunk neve data-test, akkor a hozzáféréshez elem.dataset.test-t írunk, ahol elem - az elemünket tartalmazó változó.

Nézzünk egy példát. Tegyük fel, hogy a következő elem adott:

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

Jelenítsük meg a képernyőn a data-num attribútumának értékét:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // kiírja 1000-at

És most adjunk ennek az attribútumnak egy másik értéket:

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

Задание 1

Adott a következő kód:

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

Tegyétek úgy, hogy a div-re kattintva a szöveg végéhez hozzáadódjon a data-text attribútumának tartalma.

Задание 2

Adottak div-ek, amelyek a data-num attribútumban tartalmazzák a sorszámukat:

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

Tegyétek úgy, hogy bármelyik div-re kattintva a végéhez íródjon a sorszáma.

Задание 3

Adott egy gomb. Tegyétek úgy, hogy ez a gomb számolja a rá kattintások számát, egy egyéni attribútumba mentve azokat. Legyen, hogy egy másik gombra kattintva a képernyőre kiírjuk, hány kattintás történt az első gombon.

Задание 4

Adott egy input mező:

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

Ebben az input mezőben a data-length attribútum azt tartalmazza, hány karaktert kell beírni az input mezőbe. Tegyétek úgy, hogy fókuszvesztéskor, ha a beírt karakterek száma nem egyezik a megadottal, akkor erről üzenet jelenjen meg.

Задание 5

Adott egy input mező:

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

Ebben az input mezőben a data-min és data-max attribútumok egy tartományt tartalmaznak. Tegyétek úgy, hogy fókuszvesztéskor, ha a beírt karakterek száma nem esik ebbe a tartományba, akkor erről üzenet jelenjen meg.