Komentar: HTML5 telah menambahkan fitur baru ke atribut data khusus, yaitu, data-* atribut khusus. Di HTML5, kami dapat menggunakan awalan dengan data- untuk mengatur properti khusus yang kami butuhkan untuk menyimpan beberapa data
Tentu saja, di browser canggih, Anda dapat mendefinisikan dan mengakses data melalui skrip. Sangat berguna dalam praktik proyek.
Misalnya:
Gunakan metode atribut untuk mengakses nilai atribut data-* khusus
Sangat nyaman untuk menggunakan metode atribut untuk mengakses nilai data-* atribut khusus:
// Gunakan getAttribute untuk mendapatkan data- atribut
var user = dokumen. getElementById ('user');
var username = tanaman. getAttribute ('data-uname'); // username = 'script house'
var userid = tanaman. getAttribute ('data-uid'); // userid = '12345'
// Gunakan setAttribute untuk mengatur properti-properti
pengguna . setAttribute ('data-site', 'http://www.vevb.com');
Metode ini berfungsi dengan baik di semua browser modern, tetapi bukan atribut data khusus dari HTML 5 yang digunakan untuk digunakan, jika tidak, itu tidak akan berbeda dari atribut khusus yang kami gunakan sebelumnya, misalnya: misalnya:
<Div id = "user" uid = "12345" uname = "script house"> </div>
<script>
// Gunakan getAttribute untuk mendapatkan data- atribut
var user = dokumen. getElementById ('user');
var username = tanaman. getAttribute ('uname'); // username = 'script house'
var userid = tanaman. getAttribute ('uid'); // userid = '12345'
// Gunakan setAttribute untuk mengatur properti-properti
pengguna . setAttribute ('situs', 'http://www.vevb.com');
</script>
Atribut khusus "asli" ini tidak berbeda dari atribut data di atas-*, dan nama atribut pengetahuan berbeda.
Atribut Dataset Mengakses Nilai Data-* Atribut Kustom
Dengan cara ini, mengakses nilai atribut dataset dari Atribut Data-* Kustom dengan mengakses atribut dataset suatu elemen. Properti dataset ini adalah bagian dari HTML5 JavaScript API dan digunakan untuk mengembalikan objek DomStringMap dengan semua atribut data elemen yang dipilih.
Saat menggunakan metode ini, alih-alih menggunakan nama atribut lengkap, seperti data-UID, awalan data harus dihapus.
Catatan khusus lainnya adalah: Jika nama atribut data berisi tanda hubung, misalnya: data-kelahiran-kelahiran, tanda hubung akan dihapus dan dikonversi menjadi penamaan seperti unta. Nama atribut sebelumnya harus dikonversi: DateOfbirth.
<Div Data-ID = "1234567890"-Name = "Script House" Data-of-Birth> Door </Div>
<type skrip = "Teks/JavaScript">
var el = document.queryselector ('#user');
console.log (el.id); // 'pengguna'
console.log (el.dataset); // a domstringmap
console.log (el.dataset.id); // '1234567890'
console.log (el.dataset.name); // 'House Script'
console.log (el.dataset.dateofbirth); // ''
el.dataset.dateofbirth = '1985-01-05'; // Atur nilai data-darat-of-kelahiran.
console.log ('somedataattr' di el.dataset); // false
el.dataset.somedataAttr = 'mydata';
Console.log ('SomedataAttr' di El.Dataset); // Benar
</script>
Jika Anda ingin menghapus properti data, Anda dapat melakukan ini: Hapus EL. dataset. pengenal ; atau EL .Dataset. id = null; .
Ini terlihat indah, haha, tapi sayangnya, atribut dataset baru hanya diimplementasikan dalam Chrome 8+ Firefox (GECKO) 6.0+ Internet Explorer 11+ Opera 11.10+ browser Safari 6+, sehingga penggunaan terbaik getAttribute dan setAttribute untuk beroperasi selama periode ini.
Tentang pemilih data-properti
Dalam pengembangan aktual, Anda mungkin merasa berguna, Anda dapat memilih elemen terkait berdasarkan atribut data khusus Anda. Misalnya, gunakan QuerySelectorall untuk memilih elemen:
// Pilih semua elemen yang berisi atribut 'Data-Flowering'
dokumen. queryselectorall ('[data-flowering]');
// Pilih semua elemen dengan nilai atribut 'data-teks' merah
dokumen. queryselectorAll ('[data-text-color = "red"]');
Demikian pula, kami juga dapat mengatur gaya CSS untuk elemen yang sesuai melalui nilai atribut data, seperti contoh berikut:
<type style = "text/css">
.pengguna {
Lebar: 256px;
Tinggi: 200px;
}
.user [data-name = 'feiwen'] {
Warna: Coklat
}
.user [data-name = 'css'] {
Warna: Merah
}
</tyle>
<Div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<Div class = "user" data-id = "124" data-name = "css"> dermaga </div>