Rumah >hujung hadapan web >html tutorial >Bagaimanakah saya menggunakan atribut data tersuai HTML5 (data-*) untuk menyimpan data tersuai pada elemen?
Atribut data tersuai HTML5, yang diawali dengan data-
, membolehkan anda menyimpan data tersuai secara langsung pada elemen HTML. Data ini sepenuhnya khusus aplikasi dan tidak ditafsirkan oleh penyemak imbas itu sendiri. Kelebihan utama ialah anda boleh mengaitkan maklumat sewenang -wenang dengan elemen tanpa perlu bergantung kepada teknik lain seperti kelas atau ID, yang sering mempunyai implikasi semantik.
Sebagai contoh, untuk menyimpan ID pengguna pada elemen <div> , anda akan menggunakan sintaks berikut:<pre class="brush:php;toolbar:false"> <code class="html"><div data-user-id="12345">This div belongs to user 12345.</div></code></pre>
<p> Di sini, <code>data-user-id
adalah atribut tersuai, dan "12345" adalah nilai. Anda boleh mempunyai pelbagai data-*
atribut pada satu elemen, masing-masing menyimpan maklumat yang berbeza. Nama atribut boleh menjadi camelcase (misalnya, data-userName
) atau snake_case (contohnya, data-user_name
), tetapi konsistensi disyorkan dalam projek anda. Nilai -nilai boleh menjadi rentetan, nombor, atau boolean; Walau bagaimanapun, mereka sentiasa dianggap sebagai rentetan oleh penyemak imbas, jadi anda mungkin perlu menghuraikannya dalam JavaScript jika anda berhasrat menggunakannya sebagai jenis data lain.
Menggunakan atribut data HTML5 dengan berkesan melibatkan beberapa amalan terbaik untuk memastikan kebolehkerjaan dan kejelasan:
data-product-price
adalah lebih baik daripada data-price
.data-app-userId
, data-app-userName
). Ya, JavaScript menyediakan akses mudah kepada atribut data tersuai menggunakan sifat dataset
elemen DOM.
<code class="javascript">const myDiv = document.querySelector('div[data-user-id]'); const userId = myDiv.dataset.userId; // Accesses the value of data-user-id console.log(userId); // Outputs "12345" //Modifying the data attribute: myDiv.dataset.userName = "John Doe";</code>
Harta dataset
menyediakan cara yang mudah untuk mengakses dan mengubahsuai atribut data. Perhatikan bahawa nama atribut unta ditukar kepada sifat unta dalam dataset
(misalnya, data-user-name
menjadi dataset.userName
). Jika atribut tidak wujud, mengaksesnya akan kembali undefined
.
Atribut data HTML5 menawarkan pendekatan yang berbeza untuk menyimpan data berbanding dengan kaedah lain:
data-
. Walau bagaimanapun, sifat -sifat ini mungkin ditafsirkan secara berbeza oleh pelayar atau versi HTML masa depan. Menggunakan data-*
memastikan bahawa atribut ini dianggap sebagai data khusus aplikasi dan mengelakkan konflik yang berpotensi.Pada dasarnya, atribut data HTML5 menyediakan mekanisme ringan, boleh diakses, dan semantik yang sesuai untuk menyimpan sejumlah kecil data khusus aplikasi secara langsung dalam struktur HTML, merapatkan jurang antara HTML dan JavaScript.
Atas ialah kandungan terperinci Bagaimanakah saya menggunakan atribut data tersuai HTML5 (data-*) untuk menyimpan data tersuai pada elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!