Dette indlæg fastlægger arbejdet og brugen af HTML DOM Style 'backgroundImage' egenskaben.
Hvordan man bruger HTML DOM Style 'baggrundsbillede' egenskab i JavaScript?
HTML DOM-stilen ' baggrundsbillede ” egenskab bruges til at tilpasse HTML-elementet og dokumentet ved at tilføje et baggrundsbillede ved at henvise til dets sti.
Syntaks (indstilling af 'baggrundsbillede'-egenskaben)
objekt. stil . baggrundsbillede = 'url('URL')|ingen|initial|arver'Ovenstående syntaks understøtter følgende 'baggrundsbillede' egenskabsværdier:
- url('URL'): Det angiver placeringen af det ønskede baggrundsbillede.
- ingen: Det repræsenterer standardværdien, dvs. intet baggrundsbillede.
- initial: Det svarer til standardværdien for browseren.
- arve: Det arver egenskaben fra dets overordnede element.
Syntaks (returnerende URL for 'baggrundsbillede'-egenskaben)
objekt. stil . baggrundsbilledeDenne syntaks returnerer strengværdien, der indeholder URL'en for det tilføjede baggrundsbillede.
Lad os bruge de ovenfor definerede syntakser praktisk til at forklare brugen af stilegenskaben 'backgroundImage'.
Eksempel 1: Anvend egenskaben Style 'backgroundImage' for at indstille baggrundsbilledet
Dette eksempel anvender stilen ' baggrundsbillede ” egenskab for at indstille det ønskede baggrundsbillede til dokumentet ved at angive dets URL.
HTML kode
Først skal du tage et kig på den angivne HTML-kode:
< h2 > Brug HTML DOM Stil backgroundImage Property i JavaScript h2 >
< knap ved klik = 'myFunc()' > Klik her knap >
I denne kode:
- Det ' ” tag tilføjer underoverskriften til niveau 2.
- Det '
' tag opretter en knap med en vedhæftet ' onclick ' hændelse for at udføre funktionen ' myFunc() ” ved at klikke på knappen.
JavaScript kode
Følg derefter den givne JavaScript-kode:
< manuskript >funktion myFunc ( ) {
dokument. legeme . stil . baggrundsbillede = 'url('./html&css/image.jpg')' ;
}
manuskript >
I ovenstående kodestykke:
- Funktionen kaldet ' myFunc() ” er defineret.
- I sin definition er ' style.backgroundImage ' egenskaben anvender den angivne ' URL ” billede til baggrunden for hele dokumentet.
Produktion
Outputtet viser, at baggrundsbilledet tilføjes til hele dokumentet ved knapklik.
Eksempel 2: Anvend stilegenskaben 'backgroundImage' for at returnere URL'en til baggrundsbilledet
Det ' baggrundsbillede ” egenskaben er også fordelagtig til at returnere URL'en til baggrundsbilledet. Lad os se det praktisk talt.
HTML kode
Gå først den skrevne HTML-kode igennem:
< h2 > Brug HTML DOM Stil backgroundImage Property i JavaScript h2 >< div id = 'myDiv' stil = 'højde: 500px; bredde: 500px;
kant: 3px ensfarvet sort;baggrundsbillede:url('./html&css/image.jpg')' > Det her er en div div >
< h4 id = 'demo' > h4 >
I ovenstående kodeblok:
- Det ' baggrundsbillede ” egenskaben bruges i “”-elementet, der tilføjer et baggrundsbillede svarende til den givne URL.
- Det ' ” element opretter en tom underoverskrift på niveau 4, der viser den returnerede værdi (URL) af det tilføjede baggrundsbillede.
JavaScript kode
Fortsæt nu til JavaScript-koden:
< manuskript >
lad img = dokument. getElementById ( 'myDiv' ) . stil . baggrundsbillede ;
dokument. getElementById ( 'demo' ) . indreHTML = img ;
manuskript >I denne kodeblok:
- Erklær variablen ' img ', der bruger ' document.getElementById() ”-metoden for at få adgang til “”-elementet via dets id “myDiv” og anvender et baggrundsbillede via “ baggrundsbillede ” ejendom.
- Dernæst henter metoden 'document.getElementById()' den tomme underoverskrift ved hjælp af dens id 'demo' for at vise URL'en til det vedhæftede baggrundsbillede.
Produktion
Outputtet viser URL'en for baggrundsbilledet anvendt på 'div'-elementet.
Konklusion
JavaScript bruger stilen ' baggrundsbillede ” egenskab til at tildele baggrundsbilledet til det ønskede HTML-element eller returnere dets URL. Den understøtter fire egenskabsværdier til at indstille baggrundsbilledet, inklusive 'initial', 'arv', 'URL' og 'ingen'. Det understøtter dog ikke nogen værdi for at få URL'en til baggrundsbilledet. Dette indlæg gav en kort beskrivelse af brugen af HTML DOM-stilen 'backgroundImage' egenskaben i JavaScript.