I JavaScript er det nettsider som trenger en attraktiv layout, for eksempel mørk bakgrunn som vanligvis fungerer bedre for grensesnitt. På samme måte lar hvite bakgrunner leserne fokusere på innhold, og derfor bruker nyhetsportalene eller bloggene en relativt lys bakgrunn med mørk tekst. I slike tilfeller blir JavaScript veldig nyttig for å formatere og forbedre dokumentdesign.
Denne artikkelen vil diskutere metodene for å endre bakgrunnsbildet i JavaScript.
Hvordan endre bakgrunnsbilde i JavaScript?
For å endre bakgrunnsbildet i JavaScript, kan følgende tilnærminger brukes:
- ' bakgrunnsbilde ' eiendom på ' DOM '.
- ' getElementById() 'metode og ' bakgrunnsbilde ' eiendom på ' avsnitt '.
Gå gjennom de diskuterte metodene én etter én!
Metode 1: Endre bakgrunnsbilde i JavaScript ved å bruke backgroundImage-egenskapen på DOM.
« bakgrunnsbilde ”-egenskapen justerer bakgrunnsbildet til det angitte elementet. Denne teknikken kan brukes ved å bruke egenskapen backgroundImage og spesifisere bakgrunnsbildet ved å finne banen som et argument.
Syntaks
I syntaksen ovenfor, ' URL ' refererer til banen til bildet.
Se på følgende eksempel for demonstrasjon.
Eksempel
I dette eksemplet vil en knapp inkluderes med den angitte verdien og en ' ved trykk ” hendelse som omdirigerer til en
funksjon kalt backgroundImage():
Nå, en funksjon ' bakgrunnsbilde() ' vil bli erklært og ' dokument.kroppsstil.bakgrunnsbilde egenskapen vil få tilgang til bakgrunnsbildet ved å bruke den angitte bildebanen i argumentet:
Utdataene fra implementeringen ovenfor vil resultere som følger:
Metode 2: Endre bakgrunnsbilde i JavaScript ved å bruke getElementById()-metoden og backgroundImage-egenskapen på avsnitt
« getElementById() '-metoden returnerer et element med en spesifisert verdi og ' bakgrunnsbilde ” egenskap, som nevnt ovenfor, returnerer bakgrunnsbildet til det bestemte elementet spesifisert i argumentet. Denne metoden kan brukes for å kartlegge den spesifiserte fargen på bakgrunnen til det bestemte avsnittet.
Syntaks
Her, ' elementer ” refererer til id-en til et element.
Gå gjennom følgende eksempel for en bedre forståelse av det angitte konseptet.
Eksempel
Ta først med et avsnitt i
-taggen og tilordne den en spesifikk id:
Deretter oppretter du en knapp med en onclick-hendelse som får tilgang til funksjonen backgroundImage() som diskutert i forrige metode:
Til slutt, erklær funksjonen kalt ' bakgrunnsbilde() ' på samme måte. Her får du tilgang til den definerte ID-en ved å bruke ' getElementById() ”-metoden og bruk det angitte bakgrunnsbildet på det. Dette vil resultere i implementering av fargen på avsnittets bakgrunn:
Produksjon
Vi har samlet den enkleste metoden for å endre bakgrunnsbilde i Javascript
Konklusjon
For å endre bakgrunnsbilde i Javascript, bruk ' bakgrunnsbilde ' eiendom på ' DOM ' for å bruke det spesifiserte bakgrunnsbildet på hele nettsiden ved å bruke en funksjon eller ved å hente den bestemte ID-en ved å bruke ' getElementById() ' metode og bruk ' bakgrunnsbilde ' egenskap på den angitte ' avsnitt '. Denne bloggen illustrerer metodene for å endre bakgrunnsbilder i JavaScript.