Posting ini menjelaskan cara kerja dan penggunaan properti 'backgroundImage' HTML DOM Style.
Bagaimana Cara Menggunakan Properti 'backgroundImage' Gaya HTML DOM di JavaScript?
Gaya HTML DOM “ gambar latar belakang ” properti digunakan untuk menyesuaikan elemen HTML dan dokumen dengan menambahkan gambar latar belakang dengan merujuk ke jalurnya.
Sintaks (Mengatur Properti 'backgroundImage')
obyek. gaya . gambar latar belakang = 'url('URL')|none|initial|mewarisi'Sintaks di atas mendukung nilai properti 'backgroundImage' berikut:
- url('URL'): Ini menentukan lokasi gambar latar belakang yang diinginkan.
- tidak ada: Ini mewakili nilai default yaitu, tidak ada gambar latar belakang.
- awal: Ini mirip dengan nilai default browser.
- mewarisi: Itu mewarisi properti dari elemen induknya.
Sintaks (Returning URL dari Properti 'backgroundImage')
obyek. gaya . gambar latar belakangSintaks ini mengembalikan nilai string yang berisi URL dari gambar latar yang ditambahkan.
Mari kita gunakan sintaks yang ditentukan di atas secara praktis untuk menjelaskan penggunaan properti style 'backgroundImage'.
Contoh 1: Menerapkan Properti Style “backgroundImage” untuk Mengatur Gambar Latar Belakang
Contoh ini menerapkan gaya “ gambar latar belakang ” untuk menyetel gambar latar yang diinginkan ke dokumen dengan menentukan URL-nya.
Kode HTML
Pertama, lihat kode HTML yang disebutkan:
< h2 > Menggunakan HTML DOM Gaya properti backgroundImage dalam JavaScript h2 >
< klik tombol = 'Fungsisaya()' > Klik disini tombol >
Dalam kode ini:
- “ ” tag menambahkan subjudul level 2.
- “
” tag membuat tombol yang memiliki lampiran “ onclick ” acara untuk menjalankan fungsi “ myFunc() ” pada klik tombol.
Kode JavaScript
Selanjutnya, ikuti kode JavaScript yang diberikan:
< naskah >fungsi myFunc ( ) {
dokumen. tubuh . gaya . gambar latar belakang = 'url('./html&css/gambar.jpg')' ;
}
naskah >
Dalam cuplikan kode di atas:
- Fungsi bernama “ myFunc() ' didefinisikan.
- Dalam definisinya, “ style.backgroundImage ” properti menerapkan yang ditentukan “ URL ” ke latar belakang seluruh dokumen.
Keluaran
Keluarannya menunjukkan bahwa gambar latar belakang ditambahkan ke seluruh dokumen saat tombol diklik.
Contoh 2: Terapkan Properti Style 'backgroundImage' untuk Mengembalikan URL Gambar Latar Belakang
“ gambar latar belakang ” properti juga bermanfaat untuk mengembalikan URL gambar latar belakang. Mari kita lihat secara praktis.
Kode HTML
Pertama, buka kode HTML tertulis:
< h2 > Menggunakan HTML DOM Gaya properti backgroundImage dalam JavaScript h2 >< id div = 'myDiv' gaya = 'tinggi: 500px; lebar: 500px;
batas: 3px hitam pekat; gambar latar belakang: url('./html&css/image.jpg')' > Ini adalah seorang div div >
< id h4 = 'demo' > h4 >
Di blok kode di atas:
- “ gambar latar belakang ” digunakan dalam elemen “” yang menambahkan gambar latar yang sesuai dengan URL yang diberikan.
- “ ” elemen membuat subjudul kosong level 4 yang menampilkan nilai yang dikembalikan (URL) dari gambar latar belakang yang ditambahkan.
Kode JavaScript
Sekarang, lanjutkan ke kode JavaScript:
< naskah >
biarkan img = dokumen. getElementById ( 'myDiv' ) . gaya . gambar latar belakang ;
dokumen. getElementById ( 'demo' ) . innerHTML = img ;
naskah >Di blok kode ini:
- Deklarasikan variabel “ img ” yang menggunakan “ dokumen.getElementById() ” untuk mengakses elemen “” melalui id “myDiv” dan menerapkan gambar latar belakang melalui “ gambar latar belakang ' Properti.
- Selanjutnya, metode “document.getElementById()” mengambil subjudul kosong menggunakan id “demo” untuk menampilkan URL gambar latar belakang yang ditambahkan.
Keluaran
Keluarannya menampilkan URL dari gambar latar belakang yang diterapkan ke elemen 'div'.
Kesimpulan
JavaScript menggunakan gaya “ gambar latar belakang ” untuk menetapkan gambar latar belakang ke elemen HTML yang diinginkan atau mengembalikan URL-nya. Ini mendukung empat nilai properti untuk mengatur gambar latar termasuk 'awal', 'mewarisi', 'URL', dan 'tidak ada'. Namun, itu tidak mendukung nilai apa pun untuk mendapatkan URL dari gambar latar belakang. Posting ini memberikan deskripsi singkat untuk menggunakan properti 'backgroundImage' gaya HTML DOM dalam JavaScript.