V JavaScriptu obstajajo spletne strani, ki potrebujejo privlačno postavitev, kot so temna ozadja, ki običajno delujejo bolje za vmesnike. Podobno bela ozadja omogočajo bralcem, da se osredotočijo na vsebino, zato novičarski portali ali blogi uporabljajo sorazmerno svetlo ozadje s temnim besedilom. V takih primerih postane JavaScript zelo priročen pri oblikovanju in izboljšanju oblikovanja dokumentov.
Ta članek bo obravnaval metode za spreminjanje slike ozadja v JavaScriptu.
Kako spremeniti sliko ozadja v JavaScriptu?
Če želite spremeniti sliko ozadja v JavaScriptu, lahko uporabite naslednje pristope:
- “ slika ozadja » lastnina na « DOM ”.
- “ getElementById() ' metoda in ' slika ozadja » lastnina na « odstavek ”.
Pojdite skozi obravnavane metode eno za drugo!
1. način: spremenite sliko ozadja v JavaScriptu z uporabo lastnosti backgroundImage v DOM.
' slika ozadja ” lastnost prilagodi sliko ozadja podanega elementa. To tehniko lahko uporabite tako, da uporabite lastnost backgroundImage in podate sliko ozadja tako, da kot argument poiščete njeno pot.
Sintaksa
V zgornji sintaksi ' URL ” se nanaša na pot slike.
Za predstavitev si oglejte naslednji primer.
Primer
V tem primeru bo gumb vključen z navedeno vrednostjo in znakom ' onclick ” preusmeritev dogodka na a
funkcija z imenom backgroundImage():
Zdaj pa funkcija ' slika ozadja() « bo razglašen in » document.body.style.backgroundImage ” bo dostopala do slike ozadja z uporabo podane poti slike v svojem argumentu:
Rezultat zgornje izvedbe bo naslednji:
2. način: spremenite sliko ozadja v JavaScriptu z uporabo metode getElementById() in lastnosti backgroundImage v odstavku
' getElementById() ” vrne element z določeno vrednostjo in slika ozadja Lastnost, kot je navedeno zgoraj, vrne sliko ozadja določenega elementa, podanega v njenem argumentu. To metodo je mogoče uporabiti za preslikavo določene barve na ozadje določenega odstavka.
Sintaksa
Tukaj, ' elementi ” se nanaša na ID elementa.
Preglejte naslednji primer za boljše razumevanje navedenega koncepta.
Primer
Najprej vključite odstavek v oznako
in mu dodelite določen ID:
Nato ustvarite gumb z dogodkom onclick, ki dostopa do funkcije backgroundImage(), kot je opisano v prejšnji metodi:
Nazadnje, deklarirajte funkcijo z imenom ' slika ozadja() ' podobno. Tukaj dostopajte do definiranega ID-ja s pomočjo » getElementById() ” in nanj uporabite navedeno sliko ozadja. Posledica tega bo implementacija barve na ozadje odstavka:
Izhod
Zbrali smo najlažji način za spreminjanje slike ozadja v Javascriptu
Zaključek
Če želite spremeniti sliko ozadja v Javascriptu, uporabite » slika ozadja » lastnina na « DOM ” za uporabo določene slike ozadja na celotni spletni strani z uporabo funkcije ali s pridobivanjem določenega ID-ja z “ getElementById() »metoda in uporaba« slika ozadja » lastnina na določenem « odstavek ”. Ta spletni dnevnik ponazarja metode za spreminjanje slik ozadja v JavaScriptu.