Saat Anda melihat HTML, Anda sering melihat penggunaan data-role, data-theme, dll. Misalnya, efek header dapat dicapai melalui kode berikut:
<div data-role=header> <h1>Sayalah judulnya</h1> </div>
Mengapa penulisan data-role=header dapat menghasilkan efek teks bagian bawah dan tengah berwarna hitam?
Artikel ini memberikan metode penerapan paling sederhana untuk memberikan pemahaman intuitif kepada semua orang tentang penggunaan ini.
Kami menulis halaman HTML dan menyesuaikan atribut data-chb=header. Kami berharap warna latar belakang area div dengan atribut ini akan menjadi hitam, teks akan menjadi putih, dan akan ditampilkan di tengah; tidak memiliki atribut khusus data-chb akan ditampilkan secara default, kode htmlnya adalah sebagai berikut:
<body> <div data-chb=header> <h1>Saya menggunakan atribut khusus data-chb untuk div</h1> </div> <br/> <div> Saya tidak menggunakan atribut khusus data-chb . , tampilkan sesuka Anda; </div> </body>
Untuk mendapatkan efek tampilan dengan warna latar belakang hitam, teks putih, dan tampilan terpusat, kita tentukan css berikut:
<gaya> .ui_header { warna latar: hitam; perataan teks: tengah; warna: putih; batas: 1 piksel padat #000;Kemudian kita menggunakan metode js berikut untuk menambahkan definisi css secara dinamis dan mengubah gaya tampilan div dengan atribut data-chb saat halaman dimuat:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; //Melintasi semua DIV Kontrol for(var i=0;i<length;i++){ var elem = elems[i]; //Dapatkan atribut khusus dari kontrol var customAttr = elem.dataset.chb; //Anda juga bisa mendapatkan atribut khusus dengan cara berikut //var customAttr = elem.dataset[chb]; //Jika itu adalah nilai header yang telah kita tentukan sebelumnya, berarti perlu diproses if(customAttr==header ){ //Tambahkan gaya elem.setAttribute(class,ui_header);Tentunya selain fungsi di atas, atribut ini juga memiliki fungsi lain, seperti membangun data melalui JS, mengisi data, dll;
MeringkaskanDi atas adalah atribut HTML5: 'data-' yang diperkenalkan oleh editor kepada Anda. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!