Artikel Pengenalan Wulin.com (www.vevb.com): Menerapkan atribut khusus di HTML5 secara teknis tidak rumit. Kesulitan sebenarnya adalah apakah metode yang Anda pilih untuk digunakan cocok untuk proyek Anda; Jika berlaku, bagaimana membuatnya lebih efektif? Harap diingat bahwa masih terlalu dini untuk mengaktifkan metode dataset sebagai fungsi halaman, bagaimanapun, banyak browser tidak mendukung fungsi ini.
Pengembangan HTML5 sedang berjalan lancar, dan penggunaan atribut khusus dalam HTML5 secara bertahap mendapatkan popularitas di antara pengembang; Selain itu, ini juga memainkan peran penting dalam semantik pengembangan web. Dalam artikel ini, kami akan mengeksplorasi pembuatan dan akses properti data khusus HTML5, termasuk fungsi JavaScript, melalui contoh -contoh praktis.
Sebelum menggunakan HTML5, pertama -tama tambahkan atribut khusus ke elemen HTML dan akses melalui JavaScript. Jika Anda telah mencobanya sebelumnya, Anda akan menemukan bahwa mudah untuk mengabaikan verifikasi tag, dan HTML5 dapat memberi Anda fungsi membuat dan menggunakan atribut elemen Anda sendiri dalam halaman web yang valid.
Buat file HTML5:
Jika Anda belum tahu mana yang akan digunakan, Anda dapat menyalin kode berikut:
<! Doctype html>
<Html>
<head>
<script>
/*fungsi di sini*/
</script>
</head>
<body>
</body>
</html>
Atur elemen khusus di tubuh dan akses mereka menggunakan elemen JavaScript di bagian area skrip kepala.
Buat elemen:
Pertama, tambahkan beberapa konten sederhana dan atribut khusus serta elemen seperti ID sehingga kami dapat mengenali contoh JavaScript.
<Div id = Product1 data-produk-kategori = pakaian>
Kemeja katun
</div>
Seperti yang Anda lihat, atribut khusus adalah dalam bentuk: data-*, atur nama di bagian data atau nama yang Anda pilih. Menggunakan properti khusus di HTML5 adalah satu -satunya cara untuk melakukan ini. Oleh karena itu, jika Anda ingin memverifikasi bahwa halaman web valid, Anda dapat menggunakan metode ini.
Tentu saja, bagian rincian proyek menentukan apakah properti khusus bermanfaat bagi Anda dan cara menamainya. Contoh ini dapat diterapkan ke situs web ritel dalam kategori produk yang berbeda.
Properti khusus memungkinkan Anda untuk menggunakan kode JavaScript dalam halaman dengan cara khusus untuk mengatur elemen, seperti kemampuan tampilan animasi. Jika tidak ada elemen HTML standar, kami sarankan menggunakan properti khusus.
Tambahkan tombol uji
Acara ini dapat dieksekusi menggunakan elemen JavaScript sendiri pada halaman, asalkan kode berikut ditambahkan ke halaman:
<input type = tombol value = Get atribute onClick = getElementAttribute ('Product1')/>
Dapatkan atribut:
Cara paling umum untuk mengakses properti di JavaScript adalah dengan menggunakan getAttributes, yang juga merupakan langkah pertama yang perlu kita lakukan. Tambahkan fungsi berikut di area skrip kepala halaman:
function getElementAttribute (elemid) {
var theElement = document.geteLementById (elemid);
var theattribute = theElement.getAttribute ('Data-Product-Category');
peringatan (teater);
}
Di sini, kami telah menambahkan nilai peringatan ke contoh, dan tentu saja Anda juga dapat menambahkannya dalam skrip sesuai dengan kebutuhan Anda sendiri.
Dapatkan Data:
Anda dapat menggunakan kumpulan data elemen alih -alih getAttributes DOM, yang mungkin lebih efisien, terutama dalam beberapa kasus di mana kode tersebut berulang kali melalui beberapa atribut, namun, dukungan browser untuk dataset masih sangat rendah, jadi menjaga hal ini dalam pikiran kode ini dapat menjalankan proses yang sama dengan metode // di belakangnya.
// var theattribute = theElement.getAttribute ('Data-Product-Category'); var theattribute = theElement.dataset.productCategory;
Hapus Data- Dalam dataset yang dimulai dengan nama atribut, masih termasuk dalam HTML.
Perhatikan bahwa jika Anda memiliki tanda hubung dalam nama properti khusus Anda, ini akan mengambil bentuk unta ketika diakses melalui data, mis. (Data-product-Category menjadi ProductCategory).
Modul dan fungsi lainnya
Kami telah memperoleh properti ini dan skrip masih dapat diatur dan dihapus. Kode berikut menunjukkan cara mengatur properti menggunakan modul dan dataset JavaScript standar.
Anda juga dapat menggunakan metode atau dataset DOM untuk menghapus atribut tertentu:
// Metode DOM
theElement.removeattribute ('data-kategori-data');
// Versi Dataset
theelement.dataset.productCategory = null;
Kesimpulan:
Menerapkan properti khusus di HTML5 tidak rumit secara teknis. Kesulitan sebenarnya adalah apakah metode yang Anda pilih untuk digunakan cocok untuk proyek Anda; Jika demikian, bagaimana Anda bisa membuatnya lebih efektif? Harap diingat bahwa masih terlalu dini untuk mengaktifkan metode dataset sebagai fungsi halaman, bagaimanapun, banyak browser tidak mendukung fungsi ini.