Penjelasan mendetail tentang data HTML5-* atribut khusus

Dalam attr dan prop jQuery disebutkan bahwa penggunaan properti yang tidak tepat pada versi sebelum IE9 akan menyebabkan kebocoran memori, dan perbedaan antara Atribut dan Properti juga sangat merepotkan. Dalam HTML5, metode data-* ditambahkan untuk menyesuaikan atribut. yang disebut data-* sebenarnya adalah awalan data- ditambah nama atribut khusus. Data dapat disimpan menggunakan struktur seperti itu. Menggunakan data-* dapat mengatasi situasi atribut khusus yang membingungkan dan tidak terkelola saat ini.

Ada dua metode pengaturan untuk data-*, yang dapat ditulis langsung pada tag elemen HTML.

 <div id=test data-age=24> Klik Disini </div>

Data-age adalah atribut khusus. Tentu saja, kita juga dapat mengoperasikannya melalui JavaScript. Elemen dalam HTML5 akan memiliki atribut dataset, yang merupakan kumpulan pasangan nilai kunci dari tipe DOMStringMap.

 var tes = document.getElementById('test'); tes.dataset.my = 'Byron';

Ini menambahkan atribut khusus data-my ke div. Ada dua hal yang perlu diperhatikan saat menggunakan JavaScript untuk mengoperasikan kumpulan data.

1. Kita perlu menghilangkan awalan data-* saat menambahkan atau membaca atribut. Seperti contoh di atas, kita tidak menggunakan form test.dataset.data-my = 'Byron';.

2. Jika nama atribut juga mengandung tanda hubung (-), maka perlu diubah menjadi penamaan camel case. Namun jika selector digunakan di CSS, kita perlu menggunakan format tanda hubung.

Tambahkan konten ke kode tadi

 <tipe gaya=teks/css> [data-tanggal lahir] { warna latar: #0f0; lebar:100px; margin:20px;

 tes.dataset.tanggal lahir = '19890615';

Dengan cara ini, kita menyetel atribut khusus data-tanggal lahir melalui JavaScript, dan menambahkan beberapa gaya ke div di lembar gaya CSS untuk melihat efeknya.

Saat membaca, itu juga melalui objek kumpulan data, menggunakan . untuk mendapatkan atribut. Awalan data juga perlu dihilangkan, dan tanda hubung perlu diubah menjadi penamaan huruf unta.

 var test = document.getElementById('test'); test.dataset.my = 'Byron'; test.dataset.birthDate = '19890615'; test.onclick = fungsi () { peringatan(ini.dataset.my + ' ' + ini.dataset.usia+' '+ini.dataset.tanggal lahir);

Beberapa siswa mungkin bertanya apakah ada perbedaan antara ini dan getAttribute/setAttribute kecuali penamaan.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-tanggal lahir')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex);

Dari sini kita dapat melihat bahwa keduanya menyetel atribut ke atribut (omong kosong, jika tidak maka dapat disebut atribut khusus), yang berarti getAttribute/setAttribute dapat beroperasi pada semua konten kumpulan data, dan konten kumpulan data hanyalah sebagian dari atribut Khusus masalahnya adalah penamaannya, tetapi hanya ada atribut dengan awalan data- di kumpulan data (tidak ada age=25).

Jadi mengapa kita masih menggunakan data-*? Salah satu keuntungan terbesar adalah kita dapat mengelola semua atribut khusus secara terpadu di objek kumpulan data. Sangat mudah untuk melintasi semuanya tanpa tersebar, jadi masih bagus untuk digunakan.

Kabar buruknya adalah kompatibilitas browser terhadap data-* sangat pesimis.

1. Internet Explorer 11+
2. Chrome 8+
3. Firefox 6.0+
4. Opera 11.10+
5. Safari 6+

Di antara mereka, IE11+ hanya membutakan mata teman-teman saya. Tampaknya jalan masih panjang untuk menggunakan atribut ini sepenuhnya.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.