Ta objava opisuje delovanje in uporabo lastnosti »backgroundImage« sloga HTML DOM.
Kako uporabiti lastnost »backgroundImage« sloga HTML DOM v JavaScriptu?
Slog HTML DOM “ slika ozadja ” Lastnost se uporablja za prilagajanje elementa HTML in dokumenta z dodajanjem slike ozadja s sklicevanjem na njegovo pot.
Sintaksa (nastavitev lastnosti »backgroundImage«)
predmet. stil . slika ozadja = 'url('URL')|brez|začetnega|podeduj'Zgornja sintaksa podpira naslednje vrednosti lastnosti »backgroundImage«:
- url('URL'): Določa lokacijo želene slike ozadja.
- nič: Predstavlja privzeto vrednost, tj. brez slike ozadja.
- začetnica: Podobno je privzeti vrednosti brskalnika.
- podedovati: Lastnost podeduje od nadrejenega elementa.
Sintaksa (Povratni URL lastnosti »backgroundImage«)
predmet. stil . slika ozadjaTa sintaksa vrne vrednost niza, ki vsebuje URL dodane slike ozadja.
Uporabimo zgoraj definirane sintakse praktično, da razložimo uporabo lastnosti sloga 'backgroundImage'.
Primer 1: Uporabite lastnost sloga »backgroundImage«, da nastavite sliko ozadja
Ta primer uporablja slog ' slika ozadja ”, da nastavite želeno sliko ozadja za dokument tako, da navedete njegov URL.
HTML koda
Najprej si oglejte navedeno kodo HTML:
< h2 > Uporaba HTML DOM Slog Lastnost backgroundImage v JavaScriptu h2 >
< gumb na klik = 'myFunc()' > Klikni tukaj gumb >
V tej kodi:
- ' ” doda podnaslov 2. stopnje.
- '
» ustvari gumb s priloženim » onclick ” dogodek za izvedbo funkcije ” myFunc() « ob kliku na gumb.
Koda JavaScript
Nato sledite podani kodi JavaScript:
< scenarij >funkcija myFunc ( ) {
dokument. telo . stil . slika ozadja = 'url('./html&css/image.jpg')' ;
}
scenarij >
V zgornjem delčku kode:
- Funkcija z imenom ' myFunc() ” je definiran.
- V svoji definiciji je ' style.backgroundImage ' lastnost uporablja podano ' URL ” na ozadje celotnega dokumenta.
Izhod
Izhod pokaže, da je slika ozadja dodana celotnemu dokumentu po kliku gumba.
Primer 2: Uporabite lastnost sloga »backgroundImage« za vrnitev URL-ja slike ozadja
' slika ozadja Lastnost je koristna tudi za vrnitev URL-ja slike ozadja. Oglejmo si praktično.
HTML koda
Najprej preglejte napisano kodo HTML:
< h2 > Uporaba HTML DOM Slog Lastnost backgroundImage v JavaScriptu h2 >< div id = 'myDiv' stil = 'višina: 500px; širina: 500px;
obroba: 3px polna črna;background-image:url('./html&css/image.jpg')' > to je div div >
< h4 id = 'demo' > h4 >
V zgornjem kodnem bloku:
- ' slika ozadja Lastnost se uporablja v elementu »«, ki doda sliko ozadja, ki ustreza podanemu URL-ju.
- ' ” ustvari prazen podnaslov ravni 4, ki prikazuje vrnjeno vrednost (URL) dodane slike ozadja.
Koda JavaScript
Zdaj pa nadaljujte s kodo JavaScript:
< scenarij >
naj img = dokument. getElementById ( 'myDiv' ) . stil . slika ozadja ;
dokument. getElementById ( 'demo' ) . notranjiHTML = img ;
scenarij >V tem kodnem bloku:
- Deklarirajte spremenljivko ' img «, ki uporablja » document.getElementById() ” za dostop do elementa “” prek njegovega ID-ja “myDiv” in uporabi sliko ozadja prek “ slika ozadja ” lastnina.
- Nato metoda »document.getElementById()« pridobi prazen podnaslov z uporabo njegovega ID-ja »demo« za prikaz URL-ja dodane slike ozadja.
Izhod
Izhod prikaže URL slike ozadja, uporabljene za element »div«.
Zaključek
JavaScript uporablja slog ' slika ozadja ” lastnost za dodelitev slike ozadja želenemu elementu HTML ali vrnitev njegovega URL-ja. Podpira štiri vrednosti lastnosti za nastavitev slike ozadja, vključno z »initial«, »inherit«, »URL« in »none«. Vendar pa ne podpira nobene vrednosti za pridobivanje URL-ja slike ozadja. Ta objava je podala kratek opis uporabe lastnosti »backgroundImage« sloga HTML DOM v JavaScriptu.