Data atribut tersuai HTML5-* pengenalan terperinci dan kemahiran tutorial examples

Sudah tentu, definisi dan capaian data boleh dilakukan melalui skrip dalam pelayar lanjutan. Sangat berguna dalam amalan projek.

Contohnya:

Salin kod

Kod adalah seperti berikut:

Gunakan kaedah atribut untuk mengakses nilai data-* atribut tersuai

Sangat mudah untuk menggunakan kaedah atribut untuk mengakses nilai data-* atribut tersuai:

Salin kod

Kodnya adalah seperti berikut:

// 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:

Salin kod

Kod adalah seperti berikut:

// 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.

Salin kodKod tersebut adalah seperti berikut:

Dock

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini