Dalam JavaScript, terdapat halaman web yang memerlukan reka letak yang menarik, seperti latar belakang gelap yang biasanya berfungsi lebih baik untuk antara muka. Begitu juga, latar belakang putih membenarkan pembaca menumpukan pada kandungan, jadi portal berita atau blog menggunakan latar belakang yang agak terang dengan teks gelap. Dalam kes sedemikian, JavaScript menjadi sangat berguna dalam memformat dan menambah baik reka bentuk dokumen.
Artikel ini akan membincangkan kaedah untuk menukar imej latar belakang dalam JavaScript.
Bagaimana untuk Mengubah Imej Latar Belakang dalam JavaScript?
Untuk menukar imej latar belakang dalam JavaScript, pendekatan berikut boleh digunakan:
- “ imej latar belakang ” harta pada “ DOM ”.
- “ getElementById() ' kaedah dan ' imej latar belakang ” harta pada “ perenggan ”.
Semak kaedah yang dibincangkan satu persatu!
Kaedah 1: Tukar Imej Latar Belakang dalam JavaScript Menggunakan sifat backgroundImage pada DOM.
' imej latar belakang ” harta melaraskan imej latar belakang elemen yang ditentukan. Teknik ini boleh digunakan dengan menggunakan sifat backgroundImage dan menentukan imej latar belakang dengan mencari laluannya sebagai hujah.
Sintaks
Dalam sintaks di atas, ' URL ” merujuk kepada laluan imej.
Lihat contoh berikut untuk demonstrasi.
Contoh
Dalam contoh ini, butang akan disertakan dengan nilai yang ditentukan dan ' onclick ” acara mengubah hala ke a
fungsi bernama backgroundImage():
Sekarang, fungsi ' backgroundImage() ' akan diisytiharkan dan ' document.body.style.backgroundImage ” harta akan mengakses imej latar belakang menggunakan laluan imej yang ditentukan dalam hujahnya:
Output pelaksanaan di atas akan terhasil seperti berikut:
Kaedah 2: Tukar Imej Latar Belakang dalam JavaScript Menggunakan kaedah getElementById() dan sifat backgroundImage pada perenggan
' getElementById() ' kaedah mengembalikan elemen dengan nilai tertentu dan ' imej latar belakang ” property, seperti yang dinyatakan di atas, mengembalikan imej latar belakang elemen tertentu yang dinyatakan dalam hujahnya. Kaedah ini boleh digunakan untuk memetakan warna yang ditentukan pada latar belakang perenggan tertentu.
Sintaks
Di sini, ' elemen ” merujuk kepada id sesuatu unsur.
Ikuti contoh berikut untuk pemahaman yang lebih baik tentang konsep yang dinyatakan.
Contoh
Mula-mula, masukkan perenggan dalam teg
dan tetapkan ia id tertentu:
Seterusnya, buat butang dengan acara onclick yang mengakses fungsi backgroundImage() seperti yang dibincangkan dalam kaedah sebelumnya:
Akhir sekali, isytiharkan fungsi bernama ' backgroundImage() ” begitu juga. Di sini, akses Id yang ditentukan menggunakan ' getElementById() ” kaedah dan gunakan imej latar belakang yang ditentukan padanya. Ini akan menghasilkan pelaksanaan warna pada latar belakang perenggan:
Pengeluaran
Kami telah menyusun kaedah paling mudah untuk menukar imej latar belakang dalam Javascript
Kesimpulan
Untuk menukar imej latar belakang dalam Javascript, gunakan ' imej latar belakang ” harta pada “ DOM ' untuk menggunakan imej latar belakang yang ditentukan pada keseluruhan halaman web menggunakan fungsi atau dengan mendapatkan id tertentu menggunakan ' getElementById() ' kaedah dan mengaplikasikan ' imej latar belakang ” harta pada yang dinyatakan “ perenggan ”. Blog ini menggambarkan kaedah untuk menukar imej latar belakang dalam JavaScript.