Siaran ini akan menggambarkan prosedur untuk menetapkan berbilang atribut pada elemen HTML menggunakan JavaScript.
Bagaimana untuk Menetapkan Berbilang Atribut pada Elemen Menggunakan JavaScript?
Untuk menetapkan berbilang atribut pada elemen secara serentak, pertama, cipta objek dengan nama dan nilai atribut. Dapatkan senarai kunci objek sebagai tatasusunan dengan ' Object.keys() ” kaedah, kemudian, tetapkan semua atribut pada elemen HTML yang ditentukan dengan “ setAttribute() ” kaedah.
Sintaks
Sintaks yang diberikan digunakan untuk kaedah setAttribute():
unsur. setAttribute ( attrName, attrValue ) ;
Sintaks di atas mengandungi dua parameter: “ nama ” dan “ nilai ”.
- “ attrName ” ialah nama atribut baharu.
- “ attrValue ” ialah nilai atribut baharu.
- Kaedah ini akan mencipta atribut baharu dan memberikannya nilai. Jika atribut yang ditentukan sudah wujud, maka nilainya akan dikemas kini.
Gunakan sintaks yang diberikan untuk kaedah Object.keys() :
Objek . kunci ( objek )Ia mengembalikan tatasusunan objek yang diberikan.
Contoh 1: Tetapkan Berbilang Atribut pada Elemen Menggunakan Kaedah forEach() Dengan Kaedah setAttribute()
Pertama, buat elemen dalam fail HTML:
< id butang = 'butang' > LINUXHINT butang >Pada masa ini, halaman web akan kelihatan seperti ini:
Dalam kod JavaScript, pertama, buat objek bernama ' elementAttributes ” dan tambahkan atribut dengan nama dan nilai pada objek. Di sini, kami akan menambah atribut gaya, nama elemen dan sifat lumpuhkan untuk elemen butang:
const elementAttributes = {gaya : 'warna latar belakang: rgb(153, 28, 49); warna: putih;' ,
nama : 'LinuxButton' ,
kurang upaya : '' ,
} ;
Sekarang, tentukan fungsi bernama ' setMultipleAttributesonElement ” di mana mula-mula panggil “ Object.keys() ' kaedah untuk mendapatkan tatasusunan kunci objek dan kemudian menggunakan ' untuk setiap() ' kaedah untuk lelaran melalui tatasusunan dan akhirnya memanggil ' setAttribute() ” kaedah untuk menetapkan semua atribut yang ditentukan pada elemen HTML yang ditentukan.
set fungsiMultipleAttributesonElement ( elemen, elemenAtribut ) {Objek . kunci ( elementAttributes ) . untuk setiap ( atribut => {
unsur. setAttribute ( atribut, elemAttributes [ atribut ] ) ;
} ) ;
}
Ambil butang menggunakan id yang ditetapkan dengan bantuan ' getElementById() ' kaedah:
const butang = dokumen. getElementById ( 'butang' ) ;Guna fungsi yang ditentukan ' setMultipleAttributesonElement ” dan lulus elemen sebagai hujah pertama dan objek atribut sebagai hujah kedua:
setMultipleAttributesonElement ( butang, elementAttributes ) ;Output menunjukkan bahawa berbilang atribut butang berjaya ditambahkan:
Anda juga boleh menetapkan berbilang atribut pada elemen tanpa membuat objek berasingan untuk atribut. Untuk melakukan ini, ikuti contoh di bawah.
Contoh 2: Tetapkan Berbilang Atribut pada Elemen Menggunakan untuk Gelung Dengan Kaedah setAttribute().
Tentukan fungsi dengan dua parameter dalam fail JavaScript dan gunakan gelung for untuk menetapkan berbilang atribut di dalamnya dengan memanggil ' setAttribute() ' kaedah:
set fungsiMultipleAttributesonElement ( elemen, elemenAtribut ) {untuk ( biarkan saya dalam elemAttributes ) {
unsur. setAttribute ( i, elemAttributes [ i ] ) ;
}
}
Dapatkan semula butang menggunakan id yang ditetapkan:
const butang = dokumen. getElementById ( 'butang' ) ;Panggil fungsi yang ditentukan dengan menghantar elemen butang dan berbilang atribut dalam bentuk pasangan nilai nama:
setMultipleAttributesonElement ( butang, { 'gaya' : 'warna latar belakang: rgb(153, 28, 49); warna: putih;' , 'kurang upaya' : '' , 'nama' : 'LinuxButton' } ) ;Pengeluaran
Kami telah mengumpulkan semua maklumat penting yang berkaitan dengan menetapkan berbilang atribut pada elemen HTML menggunakan JavaScript.
Kesimpulan
JavaScript dipratentukan setAttribute() ” kaedah digunakan untuk menetapkan atribut tunggal atau berbilang untuk elemen. Untuk menetapkan berbilang atribut pada elemen, mula-mula buat objek yang mengandungi atribut dalam bentuk nama-nilai. Dapatkan kunci objek dalam tatasusunan menggunakan ' Object.keys() ” kaedah, kemudian tetapkan semua atribut pada elemen yang ditentukan dengan “ setAttribute() ” kaedah. Dalam siaran ini, kami telah menggambarkan prosedur untuk menetapkan berbilang atribut pada elemen HTML menggunakan JavaScript.