Ez a bejegyzés a HTML DOM stílus „backgroundImage” tulajdonságának működését és használatát mutatja be.
Hogyan használjuk a HTML DOM stílusú „backgroundImage” tulajdonságot a JavaScriptben?
A HTML DOM stílus ' háttérkép ” tulajdonság a HTML elem és a dokumentum testreszabására szolgál egy háttérkép hozzáfűzésével az elérési útjára hivatkozva.
Szintaxis (a „backgroundImage” tulajdonság beállítása)
tárgy. stílus . háttérkép = 'url('URL')|none|initial|inherit'A fenti szintaxis a következő „backgroundImage” tulajdonságértékeket támogatja:
- url('URL'): Meghatározza a kívánt háttérkép helyét.
- egyik sem: Az alapértelmezett értéket képviseli, azaz nincs háttérkép.
- a kezdeti: Ez hasonló a böngésző alapértelmezett értékéhez.
- örököl: A tulajdonságot a szülőelemétől örökli.
Szintaxis (a „backgroundImage” tulajdonság visszatérő URL-je)
tárgy. stílus . háttérképEz a szintaxis a hozzáadott háttérkép URL-jét tartalmazó karakterlánc-értéket adja vissza.
Használjuk a fent definiált szintaxisokat gyakorlatilag a „backgroundImage” stílus tulajdonság használatának magyarázatára.
1. példa: Alkalmazza a Style „backgroundImage” tulajdonságot a háttérkép beállításához
Ez a példa a 'stílust' alkalmazza háttérkép ” tulajdonság a kívánt háttérkép beállításához a dokumentumhoz az URL megadásával.
HTML kód
Először nézze meg a megadott HTML-kódot:
< h2 > Használat HTML DOM Stílus backgroundImage tulajdonság JavaScriptben h2 >
< gomb onclick = 'myFunc()' > Kattints ide gomb >
Ebben a kódban:
- A ' ” címke hozzáadja a 2. szint alcímét.
- A '
' címke létrehoz egy gombot, amelyhez csatolva van ' kattintásra 'esemény a funkció végrehajtásához' myFunc() ” gombra kattintva.
JavaScript kód
Ezután kövesse a megadott JavaScript kódot:
< forgatókönyv >funkció myFunc ( ) {
dokumentum. test . stílus . háttérkép = 'url('./html&css/image.jpg')' ;
}
forgatókönyv >
A fenti kódrészletben:
- A „ myFunc() ” van meghatározva.
- Meghatározásában a „ style.backgroundImage ' tulajdonság a megadott ' URL ” kép az egész dokumentum hátterébe.
Kimenet
A kimenet azt mutatja, hogy a háttérképet a gombra kattintva hozzáadja a teljes dokumentumhoz.
2. példa: Alkalmazza a „backgroundImage” stílus tulajdonságot a háttérkép URL-jének visszaadásához
A ' háttérkép ” tulajdonság szintén előnyös a háttérkép URL-címének visszaadásához. Lássuk a gyakorlatban.
HTML kód
Először nézze át az írott HTML-kódot:
< h2 > Használat HTML DOM Stílus backgroundImage tulajdonság JavaScriptben h2 >< div id = 'myDiv' stílus = 'magasság: 500 képpont; szélesség: 500 képpont;
keret: 3px tömör fekete;háttér-kép:url('./html&css/image.jpg')' > Ez egy div div >
< h4 id = 'demó' > h4 >
A fenti kódblokkban:
- A ' háttérkép ” tulajdonság a „” elemben használatos, amely az adott URL-nek megfelelő háttérképet ad hozzá.
- A ' ” elem egy üres 4. szintű alcímet hoz létre, amely megjeleníti a hozzáadott háttérkép visszaadott értékét (URL-jét).
JavaScript kód
Most folytassa a JavaScript kóddal:
< forgatókönyv >
hadd img = dokumentum. getElementById ( 'myDiv' ) . stílus . háttérkép ;
dokumentum. getElementById ( 'demó' ) . innerHTML = img ;
forgatókönyv >Ebben a kódblokkban:
- Deklarálja a változót img ', amely a ' document.getElementById() ” metódussal érheti el a „” elemet annak „myDiv” azonosítójával, és alkalmaz egy háttérképet a „ háttérkép ' ingatlan.
- Ezután a „document.getElementById()” metódus lekéri az üres alcímet a „demo” azonosítójával, hogy megjelenítse a hozzáfűzött háttérkép URL-jét.
Kimenet
A kimenet megjeleníti a „div” elemre alkalmazott háttérkép URL-címét.
Következtetés
A JavaScript a 'stílust' használja háttérkép ” tulajdonság a háttérképnek a kívánt HTML elemhez való hozzárendeléséhez vagy annak URL-címének visszaadásához. Négy tulajdonságértéket támogat a háttérkép beállításához, beleértve az „initial”, „inherit”, „URL” és „none” értéket. Azonban nem támogat semmilyen értéket a háttérkép URL-címének lekéréséhez. Ez a bejegyzés rövid leírást adott a HTML DOM stílusú „backgroundImage” tulajdonság használatához a JavaScriptben.