Posting ini akan mengilustrasikan prosedur untuk mengatur beberapa atribut pada elemen HTML menggunakan JavaScript.
Bagaimana Cara Menetapkan Banyak Atribut pada Elemen Menggunakan JavaScript?
Untuk menetapkan beberapa atribut pada suatu elemen secara bersamaan, pertama-tama, buat objek dengan nama dan nilai atribut. Dapatkan daftar kunci objek sebagai larik dengan ' Objek.kunci() ”, kemudian, atur semua atribut pada elemen HTML yang ditentukan dengan “ setAttribute() ' metode.
Sintaksis
Sintaks yang diberikan digunakan untuk metode setAttribute() :
elemen. setAttribute ( attrName, attrValue ) ;
Sintaks di atas berisi dua parameter: “ nama ' dan ' nilai ”.
- “ attrName ” adalah nama atribut baru.
- “ attrValue ” adalah nilai dari atribut baru.
- Metode ini akan membuat atribut baru dan memberinya nilai. Jika atribut yang ditentukan sudah ada, maka nilainya akan diperbarui.
Gunakan sintaks yang diberikan untuk metode Object.keys() :
Obyek . kunci ( obyek )Ini mengembalikan array dari objek yang diberikan.
Contoh 1: Tetapkan Beberapa Atribut pada Elemen Menggunakan Metode forEach() Dengan Metode setAttribute()
Pertama, buat elemen dalam file HTML:
< tombol id = 'tombol' > LINUXHINT tombol >Saat ini, halaman web akan terlihat seperti ini:
Dalam kode JavaScript, pertama buat objek bernama “ elementAttributes ” dan tambahkan atribut dengan nama dan nilai ke objek. Di sini, kita akan menambahkan atribut style, nama elemen, dan properti disable untuk elemen button:
const elementAttributes = {gaya : 'warna latar belakang: rgb(153, 28, 49); warna putih;' ,
nama : 'Tombol Linux' ,
dengan disabilitas : '' ,
} ;
Sekarang, tentukan fungsi bernama ' setMultipleAttributesonElement ' di mana pertama kali memanggil ' Objek.kunci() ” metode untuk mendapatkan larik kunci objek dan kemudian menggunakan metode “ untuk setiap() ” untuk melakukan iterasi melalui array dan akhirnya memanggil metode “ setAttribute() ” metode untuk mengatur semua atribut yang ditentukan pada elemen HTML yang ditentukan.
fungsi setMultipleAttributesonElement ( elemen, elemenAtribut ) {Obyek . kunci ( elementAttributes ) . untuk setiap ( atribut => {
elemen. setAttribute ( atribut, elemAttributes [ atribut ] ) ;
} ) ;
}
Ambil tombol menggunakan id yang ditetapkan dengan bantuan “ getElementById() ' metode:
const tombol = dokumen. getElementById ( 'tombol' ) ;Panggil fungsi yang ditentukan “ setMultipleAttributesonElement ” dan berikan elemen sebagai argumen pertama dan objek atribut sebagai argumen kedua:
setMultipleAttributesonElement ( tombol, atribut elemen ) ;Output menunjukkan bahwa beberapa atribut tombol berhasil ditambahkan:
Anda juga dapat menetapkan beberapa atribut pada suatu elemen tanpa membuat objek terpisah untuk atribut tersebut. Untuk melakukan ini, ikuti contoh di bawah ini.
Contoh 2: Tetapkan Beberapa Atribut pada Elemen Menggunakan for Loop Dengan Metode setAttribute()
Tentukan fungsi dengan dua parameter dalam file JavaScript dan gunakan for loop untuk mengatur beberapa atribut di dalamnya dengan memanggil ' setAttribute() ' metode:
fungsi setMultipleAttributesonElement ( elemen, elemenAtribut ) {untuk ( biarkan saya di elemAttributes ) {
elemen. setAttribute ( i, elemAttributes [ saya ] ) ;
}
}
Ambil tombol menggunakan id yang ditetapkan:
const tombol = dokumen. getElementById ( 'tombol' ) ;Panggil fungsi yang ditentukan dengan meneruskan elemen tombol dan beberapa atribut dalam bentuk pasangan nama-nilai:
setMultipleAttributesonElement ( tombol, { 'gaya' : 'warna latar belakang: rgb(153, 28, 49); warna: putih;' , 'dengan disabilitas' : '' , 'nama' : 'Tombol Linux' } ) ;Keluaran
Kami telah mengumpulkan semua informasi penting terkait pengaturan beberapa atribut pada elemen HTML menggunakan JavaScript.
Kesimpulan
JavaScript yang telah ditentukan sebelumnya setAttribute() ” metode digunakan untuk mengatur satu atau beberapa atribut untuk suatu elemen. Untuk mengatur beberapa atribut pada suatu elemen, pertama-tama buat objek yang berisi atribut berupa nama-nilai. Dapatkan kunci objek dalam array menggunakan ' Objek.kunci() ”, lalu atur semua atribut pada elemen yang ditentukan dengan “ setAttribute() ' metode. Dalam posting ini, kami telah mengilustrasikan prosedur untuk menetapkan beberapa atribut pada elemen HTML menggunakan JavaScript.