Bagaimana untuk menyimpan data tersuai dalam HTML sebagai data peribadi untuk halaman atau aplikasi?

Atribut tersuai ialah atribut yang direka khas yang tidak termasuk dalam atribut HTML5 standard. Mereka membenarkan kami menyesuaikan teg HTML dengan menambahkan data kami sendiri.

Atribut tersuai ialah sebarang atribut yang bermula dengan data-. Kami boleh membenamkan atribut tersuai pada semua komponen HTML menggunakan atribut data-*.

Sintaks: HTML

Dalam HTML, sintaks atribut data-* agak mudah. Setiap elemen bermula dengan data- ialah atribut data-*.

<sample_data>
   id = “sample”
   data-index = 1
   data-row = 23
   data-column = 44
</sample_data>

Syntax: diakses menggunakan JavaScript

Mengakses atribut data ini menggunakan JavaScript juga agak mudah. Kita boleh menggunakan getAttribute() dengan nama HTML penuhnya, yang boleh dibaca menggunakan atribut set data.

Sintaks: diakses menggunakan CSS

Gunakan fungsi attr() CSS untuk mengakses data.

Berikut adalah contoh...

Contoh

Contoh

Dalam contoh di bawah, kami menggunakan JavaScript untuk membaca nilai harta.

const article = document.querySelector('#sample');
sample_data.dataset.index;
sample_data.dataset.row;
sample_data.dataset.column;

Output

Apabila melaksanakan skrip di atas, ia akan menghasilkan output senarai nama yang mengandungi beberapa data.

Apabila anda cuba mengklik mana-mana nama, fungsi mendapat data dan memaparkan kotak amaran yang menunjukkan data tersuai yang kami gunakan.

Atas ialah kandungan terperinci Bagaimana untuk menyimpan data tersuai dalam HTML sebagai data peribadi untuk halaman atau aplikasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!