See postitus kirjeldab HTML DOM-stiili atribuudi 'backgroundImage' tööd ja kasutamist.
Kuidas kasutada JavaScriptis HTML DOM-stiili atribuuti 'backgroundImage'?
HTML DOM-stiil ' taustapilt ” atribuuti kasutatakse HTML-elemendi ja dokumendi kohandamiseks, lisades taustapildi, viidates selle teele.
Süntaks (atribuudi „backgroundImage” määramine)
objektiks. stiilis . taustapilt = 'url('URL')|none|initial|herit'Ülaltoodud süntaks toetab järgmisi atribuudi 'backgroundImage' väärtusi:
- url('URL'): See määrab soovitud taustpildi asukoha.
- mitte ühtegi: See tähistab vaikeväärtust, st taustpilti pole.
- esialgne: See on sarnane brauseri vaikeväärtusega.
- pärida: See pärib atribuudi oma emaelemendilt.
Süntaks (atribuudi „backgroundImage” tagastav URL)
objektiks. stiilis . taustapiltSee süntaks tagastab stringi väärtuse, mis sisaldab lisatud taustpildi URL-i.
Kasutame ülaltoodud süntaksisid praktiliselt, et selgitada stiili 'backgroundImage' atribuudi kasutamist.
Näide 1: Taustapildi määramiseks rakendage atribuuti Style 'backgroundImage'.
See näide rakendab stiili ' taustapilt ” atribuut, et määrata dokumendile soovitud taustpilt, määrates selle URL-i.
HTML-kood
Kõigepealt vaadake märgitud HTML-koodi:
< h2 > Kasutage HTML DOM Stiil backgroundImage atribuut JavaScriptis h2 >
< nupp onclick = 'myFunc()' > Kliki siia nuppu >
Selles koodis:
- ' ” silt lisab 2. taseme alampealkirja.
- '
' silt loob nupu, millele on lisatud ' onclick 'sündmus funktsiooni täitmiseks' myFunc() ” nupu klõpsamisel.
JavaScripti kood
Järgmisena järgige antud JavaScripti koodi:
< stsenaarium >funktsioon myFunc ( ) {
dokument. keha . stiilis . taustapilt = 'url('./html&css/image.jpg')' ;
}
stsenaarium >
Ülaltoodud koodilõigul:
- Funktsioon nimega ' myFunc() ” on määratletud.
- Selle määratluses on ' style.backgroundPilt atribuut ' rakendab määratud ' URL ” pilt kogu dokumendi taustale.
Väljund
Väljund näitab, et taustpilt lisatakse nupule klõpsamisel kogu dokumendile.
Näide 2: Taustapildi URL-i tagastamiseks rakendage atribuuti Style 'backgroundImage'
' taustapilt ” atribuut on kasulik ka taustpildi URL-i tagastamiseks. Vaatame seda praktiliselt.
HTML-kood
Esiteks lugege läbi kirjutatud HTML-kood:
< h2 > Kasuta HTML DOM Stiil backgroundImage atribuut JavaScriptis h2 >< divi id = 'myDiv' stiilis = 'kõrgus: 500 pikslit; laius: 500 pikslit;
ääris: 3 pikslit täismust;background-image:url('./html&css/image.jpg')' > See on div div >
< h4 id = 'demo' > h4 >
Ülaltoodud koodiplokis:
- ' taustapilt ” atribuuti kasutatakse elemendis “”, mis lisab antud URL-ile vastava taustapildi.
- ' ” element loob 4. taseme tühja alampealkirja, mis kuvab lisatud taustpildi tagastatud väärtuse (URL-i).
JavaScripti kood
Nüüd jätkake JavaScripti koodiga:
< stsenaarium >
lase img = dokument. getElementById ( 'myDiv' ) . stiilis . taustapilt ;
dokument. getElementById ( 'demo' ) . sisemine HTML = img ;
stsenaarium >Selles koodiplokis:
- Deklareerige muutuja ' img ', mis kasutab ' document.getElementById() ” meetodit, et pääseda juurde elemendile „” selle ID „myDiv” kaudu ja rakendada taustapilti „ taustapilt ” vara.
- Järgmisena tõmbab meetod „document.getElementById()” tühja alampealkirja, kasutades selle ID-d „demo”, et kuvada lisatud taustpildi URL.
Väljund
Väljund kuvab „div” elemendile rakendatud taustpildi URL-i.
Järeldus
JavaScript kasutab stiili ' taustapilt ” atribuut taustpildi määramiseks soovitud HTML-i elemendile või selle URL-i tagastamiseks. See toetab nelja atribuudi väärtust taustpildi määramiseks, sealhulgas 'esialgne', 'pärimine', 'URL' ja 'puudub'. Kuid see ei toeta taustapildi URL-i hankimiseks mingit väärtust. See postitus andis lühikirjelduse HTML DOM-i stiilis atribuudi 'backgroundImage' kasutamiseks JavaScriptis.