Angi bakgrunnsbilde av en div via funksjon i JavaScript

I prosessen med å lage attraktive og responsive nettsteder skiller seg ut, er det et krav å legge til bilder i Document Object Model (DOM) ved å utløse funksjonalitetene. Dette fører til slutt til at brukeren blir på nettstedet og utforsker det, noe som resulterer i økt trafikk til fordel for utvikleren. I slike tilfeller er det å lure på å sette bakgrunnsbilde av en DIV via JavaScript -funksjoner i å tilby ekstra funksjonaliteter.

Denne artikkelen vil forklare tilnærmingene for å sette bakgrunnsbildet til en div via en funksjon i JavaScript.

Hvordan sette bakgrunnsbildet av en div via funksjon i JavaScript?

Bakgrunnsbildet av en div via en funksjon i JavaScript kan settes ved å bruke følgende tilnærminger:

• “stil.bakgrunnsbilde”Eiendom.
• “setAttribute ()”Metode.

Tilnærming 1: Sett bakgrunnsbildet av en div ved hjelp av en funksjon i JavaScript ved å bruke stilen.BAKGRUNNTIMAGE Eiendom

“bakgrunnsbilde”Eiendom returnerer elementets bakgrunnsbilde. Denne eiendommen kan brukes til å hente "div”Element ved hjelp av en brukerdefinert funksjon og bruk et bakgrunnsbilde på det.

Syntaks

gjenstand.stil.BackgroundImage = "URL ('URL') | Tilbake | Initial | Arve"

I den gitte syntaks:

• “URL”Henviser til bildefilens beliggenhet.
• “tilbake”Peker på bakgrunnsbildet.
• “første”Henviser til eiendommens standardverdi.
• “arve”Angir arven etter eiendommen fra foreldreelementet.

Eksempel
La oss følge det undergitte eksemplet:

Dette er Linuxhint -nettstedet

Klikk for å se effekten

I ovennevnte kodebit, utfør følgende trinn:

• Inkluderer "div”Element med det spesifiserte”id”Og justerte dimensjoner.
• Etter det, inkluder den angitte overskriften.
• Opprett også en knapp med en vedlagt "ved trykk”Arrangement som omdirigerer til funksjonen Divbackground ().

La oss flytte til JavaScript -delen av koden:

I ovennevnte kodebit:

• Erklære en funksjon som heter “Divbackground ()”.
• I sin definisjon får tilgang til den inkluderte "div”Element av dets“id" bruker "dokument.getElementById ()”Metode.
• Til slutt, bruk "stil.bakgrunnsbilde”Eiendom med det spesifiserte bildets beliggenhet som“URL”.
• Dette vil resultere i å sette bakgrunnsbildet til den inkluderte overskriften og knappen i "div”.

Produksjon

I output ovenfor er det tydelig at bakgrunnsbildet brukes på inneholdt "overskrift”Og“knapp" innen "div”.

Tilnærming 2: Angi bakgrunnsbilde av en div via funksjon i JavaScript ved bruk av SetAttribute () -metode

“setAttribute ()”Metode setter en ny verdi til en attributt. Denne metoden kan brukes for å angi attributtet som en “bakgrunnsbilde”Til det inneholdte tabellen i“div”Element.

Syntaks

element.setAttribute (navn, verdi)

I syntaks ovenfor:

• “Navn”Henviser til attributtets navn.
• “verdi”Peker på attributtets verdi.

Eksempel
La oss se på følgende kodelinjer:

Sr.Nei	Navn	By
1	David	Los Angeles

Klikk for å se effekten

I ovennevnte kodebit:

• Inkluderer "div”Element med det spesifiserte”id”.
• Inneholder også det oppgitte "bord" innen "div”Med de spesifiserte verdiene til“Bordtransport”Og“Borddata”.
• I neste trinn, oppretter du en knapp med et vedlagt “ved trykk”Hendelse som påkaller funksjonen BackgroundImage ().

La oss fortsette til JavaScript -delen av koden:

I ovennevnte kodebit, utfør følgende trinn:

• Erklære en funksjon som heter “bakgrunnsbilde()”.
• I sin definisjon få tilgang til “div”Element av dets“id" bruker "dokument.getElementById ()”Metode.
• Etter det, bruk "setAttribute ()”Metode med det spesifiserte bildets vei som diskutert og“stil”Attributt som parameter.

Produksjon

Fra output ovenfor kan det observeres at bakgrunnsbildet legges til tabellen på knappeklikket.

Konklusjon

“stil.bakgrunnsbilde”Eiendom eller“setAttribute ()”Metode kan brukes til å angi bakgrunnsbilde av en div via funksjon i JavaScript. Den tidligere tilnærmingen kan implementeres for å hente "div”Element ved hjelp av en brukerdefinert funksjon og bruk et bakgrunnsbilde på det. Den sistnevnte metoden kan brukes til å angi bakgrunnsbilde av den inkluderte tabellen ved å stille inn (bilde) attributter. Denne opplæringen forklarer hvordan du setter bakgrunnsbildet til en div ved hjelp av en funksjon ved hjelp av JavaScript.