Atribut Pengguna dalam JavaScript

Dalam HTML, dibenarkan untuk menambah atribut tersuai anda sendiri kepada tag. Atribut sedemikian hendaklah bermula dengan data-, dan kemudian boleh diikuti dengan mana-mana nama atribut yang sesuai untuk anda.

Atribut pengguna boleh digunakan dalam sejumlah besar cara yang berbeza. Banyak daripada cara ini akan kita pelajari seterusnya dalam tutorial, dan lebih banyak lagi anda boleh cipta sendiri pada masa hadapan.

Cara untuk mengakses atribut ini adalah tidak standard. Anda tidak boleh hanya mengakses sifat elemen dengan nama yang sama, seperti yang kita lakukan sebelum ini, sebaliknya anda harus menggunakan sifat khas dataset, selepas itu melalui titik ditulis nama atribut tanpa data-. Sebagai contoh, jika atribut kami dipanggil data-test, maka untuk mengaksesnya kami akan menulis elem.dataset.test, di mana elem - pembolehubah dengan elemen kami.

Mari kita lihat contoh. Katakan kita mempunyai elemen berikut:

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

Mari kita paparkan nilai atribut data-num-nya pada skrin:

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

Dan sekarang mari kita tetapkan nilai lain kepada atribut ini:

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

Diberi kod berikut:

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

Lakukan supaya apabila klik pada div, pada akhir teksnya ditambahkan kandungan atributnya data-text.

Diberi div, yang mengandungi dalam atribut data-num nombor urutannya:

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

Lakukan supaya apabila klik pada mana-mana div, nombor urutannya ditulis pada akhirnya.

Diberi butang. Lakukan supaya butang ini menghitung bilangan klik padanya, dengan menulisnya dalam beberapa atribut pengguna. Biarkan apabila klik pada butang lain, pada skrin dipaparkan berapa banyak klik yang telah dilakukan pada butang pertama.

Diberi input:

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

Dalam input ini, dalam atribut data-length terkandung bilangan aksara yang perlu dimasukkan ke dalam input. Lakukan supaya apabila kehilangan fokus, jika bilangan aksara yang dimasukkan tidak sepadan dengan yang ditetapkan, mesej mengenainya dipaparkan.

Diberi input:

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

Dalam input ini, atribut data-min dan data-max mengandungi julat. Lakukan supaya apabila kehilangan fokus, jika bilangan aksara yang dimasukkan tidak masuk dalam julat ini, mesej mengenainya dipaparkan.