Rumah >hujung hadapan web >Tutorial H5 >Data atribut tersuai HTML5-* pengenalan terperinci dan kemahiran tutorial examples_html5 operasi JS
Data atribut tersuai HTML5-* pengenalan terperinci dan kemahiran tutorial examples_html5 operasi JS
- WBOYasal
- 2016-05-16 15:48:122026semak imbas
Sudah tentu, definisi dan capaian data boleh dilakukan melalui skrip dalam pelayar lanjutan. Sangat berguna dalam amalan projek.
Contohnya:
Gunakan kaedah atribut untuk mengakses nilai data-* atribut tersuai
Sangat mudah untuk menggunakan kaedah atribut untuk mengakses nilai data-* atribut tersuai:
// Gunakan getAttribute untuk mendapatkan atribut data
var user = document . getElementById ( 'pengguna' );
var userName = plant . getAttribute ( 'data-uname' ); // UserName = 'Script Home'
var userId = plant . getAttribute ( 'data-uid' ); // userId = '12345'
// Gunakan setAttribute untuk menetapkan atribut data
pengguna . setAttribute ( 'tapak-data' , 'http://www.jb51.net' ) ;
Kaedah ini boleh berfungsi seperti biasa dalam semua penyemak imbas moden, tetapi ini bukan tujuan atribut data-* HTML 5, jika tidak, ia tidak akan berbeza daripada atribut tersuai yang kami gunakan sebelum ini, contohnya:
// Gunakan getAttribute untuk mendapatkan atribut data
var user = document . getElementById ( 'pengguna' );
var userName = plant . getAttribute ( 'uname' ); // UserName = 'Script Home'
var userId = plant . getAttribute ( 'uid' );
// Gunakan setAttribute untuk menetapkan atribut data
pengguna . setAttribute ( 'tapak' , 'http://www.jb51.net' ) ;
Atribut tersuai "asal" ini tidak berbeza daripada atribut tersuai data-* di atas, tetapi nama atribut pengetahuan adalah berbeza.
data akses atribut set data-*nilai atribut tersuai
Kaedah ini mengakses nilai data-* atribut tersuai dengan mengakses atribut set data sesuatu elemen. Atribut set data ialah sebahagian daripada API JavaScript HTML5 dan digunakan untuk mengembalikan objek DOMStringMap dengan atribut data semua elemen yang dipilih.
Apabila menggunakan kaedah ini, bukannya menggunakan nama atribut lengkap, seperti data-uid, untuk mengakses data, awalan data harus dialih keluar.
Perkara lain yang perlu diambil perhatian ialah jika nama atribut data mengandungi tanda sempang, contohnya: data-tarikh-lahir, tanda sempang akan dialih keluar dan ditukar kepada penamaan huruf unta Nama atribut sebelumnya akan ditukar Selepas bahawa ia sepatutnya: dateOfBirth.