Cara Mengubah Gambar Latar Belakang di JavaScript

Cara Mengubah Gambar Latar Belakang Di Javascript



Dalam JavaScript, ada halaman web yang membutuhkan tata letak yang menarik, seperti latar belakang gelap yang biasanya berfungsi lebih baik untuk antarmuka. Demikian pula, latar belakang putih memungkinkan pembaca untuk fokus pada konten, dan portal berita atau blog menggunakan latar belakang yang relatif terang dengan teks gelap. Dalam kasus seperti itu, JavaScript menjadi sangat berguna dalam memformat dan meningkatkan desain dokumen.

Artikel ini akan membahas metode untuk mengubah gambar latar belakang dalam JavaScript.







Bagaimana Mengubah Gambar Latar Belakang di JavaScript?

Untuk mengubah gambar latar belakang dalam JavaScript, pendekatan berikut dapat digunakan:



  • gambar latar belakang ” properti di “ DOM ”.
  • getElementById() ” metode dan ” gambar latar belakang ” properti di “ gugus kalimat ”.



Ikuti metode yang dibahas satu per satu!





Metode 1: Ubah Gambar Latar Belakang dalam JavaScript Menggunakan properti backgroundImage di DOM.

' gambar latar belakang ” properti menyesuaikan gambar latar belakang dari elemen yang ditentukan. Teknik ini dapat diterapkan dengan menerapkan properti backgroundImage dan menentukan gambar latar belakang dengan menempatkan jalurnya sebagai argumen.

Sintaksis



Dalam sintaks di atas, “ URL ” mengacu pada jalur gambar.

Perhatikan contoh berikut untuk demonstrasi.

Contoh

Dalam contoh ini, sebuah tombol akan disertakan dengan nilai yang ditentukan dan ' klik ” acara dialihkan ke a
fungsi bernama backgroundImage():

Sekarang, fungsi “ gambar latar belakang() ” akan dideklarasikan dan “ document.body.style.backgroundImage ” properti akan mengakses gambar latar belakang menggunakan jalur gambar yang ditentukan dalam argumennya:

Output dari implementasi di atas akan menghasilkan sebagai berikut:

Metode 2: Ubah Gambar Latar Belakang dalam JavaScript Menggunakan metode getElementById() dan properti backgroundImage pada paragraf

' getElementById() ” metode mengembalikan elemen dengan nilai tertentu dan “ gambar latar belakang ” properti, sebagaimana dinyatakan di atas, mengembalikan gambar latar belakang dari elemen tertentu yang ditentukan dalam argumennya. Metode ini dapat diterapkan untuk memetakan warna yang ditentukan pada latar belakang paragraf tertentu.

Sintaksis

Di Sini, ' elemen ” mengacu pada id elemen.

Lihat contoh berikut untuk pemahaman yang lebih baik tentang konsep yang dinyatakan.

Contoh

Pertama, sertakan paragraf dalam tag

dan tetapkan id tertentu:

Selanjutnya, buat tombol dengan event onclick yang mengakses fungsi backgroundImage() seperti yang dibahas dalam metode sebelumnya:

Terakhir, nyatakan fungsi bernama “ gambar latar belakang() ” sama. Di sini, akses Id yang ditentukan menggunakan ' getElementById() ” dan menerapkan gambar latar belakang yang ditentukan di atasnya. Ini akan menghasilkan penerapan warna pada latar belakang paragraf:

Keluaran

Kami telah menyusun metode termudah untuk mengubah gambar latar belakang dalam Javascript

Kesimpulan

Untuk mengubah gambar latar belakang dalam Javascript, terapkan ' gambar latar belakang ” properti di “ DOM ” untuk menerapkan gambar latar yang ditentukan di seluruh halaman web menggunakan fungsi atau dengan mendapatkan id tertentu menggunakan  “ getElementById() ”metode dan penerapan” gambar latar belakang ” properti pada “ yang ditentukan gugus kalimat ”. Blog ini mengilustrasikan metode untuk mengubah gambar latar belakang dalam JavaScript.