U JavaScriptu postoje web stranice koje trebaju atraktivan izgled, poput tamne pozadine koja obično bolje funkcionira za sučelja. Slično tome, bijele pozadine omogućuju čitateljima da se usredotoče na sadržaj, pa portali s vijestima ili blogovi koriste relativno svijetlu pozadinu s tamnim tekstom. U takvim slučajevima, JavaScript postaje vrlo zgodan u oblikovanju i poboljšanju dizajna dokumenta.
Ovaj članak govori o metodama promjene pozadinske slike u JavaScriptu.
Kako promijeniti pozadinsku sliku u JavaScriptu?
Za promjenu pozadinske slike u JavaScriptu mogu se koristiti sljedeći pristupi:
- “ pozadinska slika ” posjed na “ DOM ”.
- “ getElementById() ' metoda i ' pozadinska slika ” posjed na “ paragraf ”.
Prođite kroz razmatrane metode jednu po jednu!
Metoda 1: Promjena pozadinske slike u JavaScriptu pomoću svojstva backgroundImage na DOM-u.
' pozadinska slika ” Svojstvo prilagođava pozadinsku sliku navedenog elementa. Ova se tehnika može primijeniti primjenom svojstva backgroundImage i određivanjem pozadinske slike lociranjem njezine staze kao argumenta.
Sintaksa
U gornjoj sintaksi, ' URL ” odnosi se na putanju slike.
Pogledajte sljedeći primjer za demonstraciju.
Primjer
U ovom primjeru, gumb će biti uključen s navedenom vrijednošću i ' na klik ” preusmjeravanje događaja na a
funkcija pod nazivom backgroundImage():
Sada, funkcija ' pozadinska slika() ' bit će proglašeno i ' document.body.style.backgroundImage ” svojstvo će pristupiti pozadinskoj slici koristeći navedenu putanju slike u svom argumentu:
Izlaz gornje implementacije rezultirat će kako slijedi:
Metoda 2: Promjena pozadinske slike u JavaScriptu pomoću metode getElementById() i svojstva backgroundImage u paragrafu
' getElementById() ” vraća element s navedenom vrijednošću i pozadinska slika ” svojstvo, kao što je gore navedeno, vraća pozadinsku sliku određenog elementa navedenog u njegovom argumentu. Ova se metoda može primijeniti za mapiranje određene boje na pozadini određenog odlomka.
Sintaksa
Ovdje, ' elementi ” odnosi se na ID elementa.
Prođite kroz sljedeći primjer za bolje razumijevanje navedenog koncepta.
Primjer
Prvo uključite odlomak u oznaku
i dodijelite mu određeni ID:
Zatim stvorite gumb s događajem onclick koji pristupa funkciji backgroundImage() kao što je objašnjeno u prethodnoj metodi:
Na kraju, deklarirajte funkciju pod nazivom ' pozadinska slika() ” slično. Ovdje pristupite definiranom ID-u koristeći ' getElementById() ” i na nju primijenite navedenu pozadinsku sliku. To će rezultirati implementacijom boje na pozadini odlomka:
Izlaz
Sastavili smo najjednostavniju metodu za promjenu pozadinske slike u Javascriptu
Zaključak
Za promjenu pozadinske slike u Javascriptu primijenite ' pozadinska slika ” posjed na “ DOM ” za primjenu navedene pozadinske slike na cijelu web stranicu pomoću funkcije ili dobivanjem određenog ID-a pomoću “ getElementById() “metoda i primjena” pozadinska slika ” nekretnina na navedenom ” paragraf ”. Ovaj blog ilustrira metode za promjenu pozadinskih slika u JavaScriptu.