Siaran ini menerangkan kerja dan penggunaan sifat 'backgroundImage' Gaya DOM HTML.
Bagaimana Menggunakan Harta 'backgroundImage' Gaya HTML DOM dalam JavaScript?
Gaya HTML DOM “ imej latar belakang sifat ” digunakan untuk menyesuaikan elemen HTML dan dokumen dengan menambahkan imej latar belakang dengan merujuk kepada laluannya.
Sintaks (Menetapkan Harta 'Imej latar belakang')
objek. gaya . imej latar belakang = 'url('URL')|tiada|awal|warisi'Sintaks di atas menyokong nilai sifat 'backgroundImage' berikut:
- url(‘URL’): Ia menentukan lokasi imej latar belakang yang dikehendaki.
- tiada: Ia mewakili nilai lalai iaitu, tiada imej latar belakang.
- permulaan: Ia serupa dengan nilai lalai penyemak imbas.
- mewarisi: Ia mewarisi harta daripada unsur induknya.
Sintaks (URL Mengembalikan Harta 'Imej latar belakang')
objek. gaya . imej latar belakangSintaks ini mengembalikan nilai rentetan yang mengandungi URL imej latar belakang yang ditambahkan.
Mari kita gunakan sintaks yang ditakrifkan di atas secara praktikal untuk menerangkan penggunaan sifat 'backgroundImage' gaya.
Contoh 1: Gunakan Harta Gaya 'backgroundImage' untuk Menetapkan Imej Latar Belakang
Contoh ini menggunakan gaya ' imej latar belakang ” untuk menetapkan imej latar belakang yang dikehendaki kepada dokumen dengan menentukan URLnya.
Kod HTML
Pertama, lihat kod HTML yang dinyatakan:
< h2 > guna HTML DOM Gaya backgroundImage Property dalam JavaScript h2 >
< butang onclick = 'myFunc()' > Tekan di sini butang >
Dalam kod ini:
- ' teg ” menambah subtajuk tahap 2.
- '
teg ” mencipta butang yang dilampirkan “ onclick ' acara untuk melaksanakan fungsi ' myFunc() ” apabila butang klik.
Kod JavaScript
Seterusnya, ikuti kod JavaScript yang diberikan:
< skrip >fungsi myFunc ( ) {
dokumen. badan . gaya . imej latar belakang = 'url('./html&css/image.jpg')' ;
}
skrip >
Dalam coretan kod di atas:
- Fungsi bernama “ myFunc() ' ditakrifkan.
- Dalam definisinya, ' style.backgroundImage ” harta terpakai yang ditentukan “ URL ” imej ke latar belakang keseluruhan dokumen.
Pengeluaran
Output menunjukkan bahawa imej latar belakang ditambah pada keseluruhan dokumen apabila butang klik.
Contoh 2: Gunakan Harta 'backgroundImage' Gaya untuk Mengembalikan URL Imej Latar Belakang
' imej latar belakang ” harta juga berfaedah untuk mengembalikan URL imej latar belakang. Mari lihat secara praktikal.
Kod HTML
Pertama, pergi melalui kod HTML bertulis:
< h2 > guna HTML DOM Gaya backgroundImage Property dalam JavaScript h2 >< id div = 'myDiv' gaya = 'tinggi: 500px; lebar: 500px;
sempadan: 3px hitam pepejal;background-image:url('./html&css/image.jpg')' > ini ialah div div >
< id h4 = 'demo' > h4 >
Dalam blok kod di atas:
- ' imej latar belakang sifat ” digunakan dalam elemen “” yang menambahkan imej latar belakang yang sepadan dengan URL yang diberikan.
- ' ” elemen mencipta subtajuk kosong tahap 4 yang memaparkan nilai (URL) yang dikembalikan bagi imej latar belakang yang ditambah.
Kod JavaScript
Sekarang, teruskan ke kod JavaScript:
< skrip >
biarkan img = dokumen. getElementById ( 'myDiv' ) . gaya . imej latar belakang ;
dokumen. getElementById ( 'demo' ) . innerHTML = img ;
skrip >Dalam blok kod ini:
- Nyatakan pembolehubah “ img ” yang menggunakan “ document.getElementById() ' kaedah untuk mengakses elemen '' melalui idnya 'myDiv' dan menggunakan imej latar belakang melalui ' imej latar belakang ” harta benda.
- Seterusnya, kaedah 'document.getElementById()' mengambil subtajuk kosong menggunakan 'demo' idnya untuk memaparkan URL imej latar belakang yang dilampirkan.
Pengeluaran
Output memaparkan URL imej latar belakang yang digunakan pada elemen 'div'.
Kesimpulan
JavaScript menggunakan gaya “ imej latar belakang ” harta untuk memberikan imej latar belakang kepada elemen HTML yang dikehendaki atau mengembalikan URLnya. Ia menyokong empat nilai sifat untuk menetapkan imej latar belakang termasuk 'awal', 'warisan', 'URL' dan 'tiada'. Walau bagaimanapun, ia tidak menyokong sebarang nilai untuk mendapatkan URL imej latar belakang. Siaran ini memberikan penerangan ringkas untuk menggunakan sifat 'backgroundImage' gaya DOM HTML dalam JavaScript.