Hvordan endre bakgrunnsbilde i JavaScript

I JavaScript er det websider som trenger en attraktiv utforming, for eksempel mørk bakgrunn som vanligvis fungerer bedre for grensesnitt. Tilsvarende lar hvit bakgrunn leserne fokusere på innhold, og derfor bruker nyhetsportalene eller blogger en relativt lett bakgrunn med mørk tekst. I slike tilfeller blir JavaScript veldig nyttig når det gjelder formatering og forbedring av 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 en etter en!

Metode 1: Endre bakgrunnsbilde i JavaScript ved hjelp av BackgroundImage -egenskap på DOM.

“bakgrunnsbilde”Eiendom justerer bakgrunnsbildet til det spesifiserte elementet. Denne teknikken kan brukes ved å anvende BackgroundImage -egenskapen og spesifisere bakgrunnsbildet ved å lokalisere banen som et argument.

Syntaks

I syntaks ovenfor, "URL”Henviser til banen til bildet.

Se på følgende eksempel for demonstrasjon.

Eksempel

I dette eksemplet vil en knapp bli inkludert i den spesifiserte verdien og en "ved trykk”Hendelse omdirigerer til en
Funksjon som heter BackgroundImage ():

Nå, en funksjon “bakgrunnsbilde()”Vil bli erklært og“dokument.kropp.stil.bakgrunnsbilde”Eiendom vil få tilgang til bakgrunnsbildet ved å bruke den spesifiserte bildeveien i sitt argument:

Utgangen fra implementeringen ovenfor vil resultere som følger:

Metode 2: Endre bakgrunnsbilde i JavaScript ved bruk av GetElementById () Metode og bakgrunnImage -egenskap på avsnitt

“getElementById ()”Metode returnerer et element med en spesifisert verdi og“bakgrunnsbilde”Eiendom, som nevnt ovenfor, returnerer bakgrunnsbildet av det aktuelle elementet som er spesifisert i sitt argument. Denne metoden kan brukes for å kartlegge den spesifiserte fargen på bakgrunn av det aktuelle avsnittet.

Syntaks

Her, “ElementId”Refererer til IDen til et element.

Gå gjennom følgende eksempel for en bedre forståelse av det uttalte konseptet.

Eksempel

Først må du ta med et avsnitt i

Merk 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ærer funksjonen som heter “bakgrunnsbilde()" på samme måte. Her får du tilgang til den definerte IDen ved å bruke "getElementById ()”Metode og bruk det spesifiserte 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 websiden ved hjelp av en funksjon eller ved å få den spesielle ID -en ved å bruke“getElementById ()”Metode og anvendelse“bakgrunnsbilde”Eiendom på den spesifiserte”avsnitt”. Denne bloggen illustrerer metodene for å endre bakgrunnsbilder i JavaScript.