Dette innlegget skriver ned arbeidet og bruken av HTML DOM Style 'backgroundImage'-egenskapen.
Hvordan bruke HTML DOM Style 'backgroundImage' eiendom i JavaScript?
HTML DOM-stilen ' bakgrunnsbilde ”-egenskapen brukes til å tilpasse HTML-elementet og dokumentet ved å legge til et bakgrunnsbilde ved å referere til banen.
Syntaks (Angi 'backgroundImage'-egenskapen)
gjenstand. stil . bakgrunnsbilde = 'url('URL')|ingen|initial|arv'Syntaksen ovenfor støtter følgende 'backgroundImage'-egenskapsverdier:
- url('URL'): Den spesifiserer plasseringen av ønsket bakgrunnsbilde.
- ingen: Den representerer standardverdien, dvs. ingen bakgrunnsbilde.
- første: Den ligner på standardverdien til nettleseren.
- arve: Den arver eiendommen fra det overordnede elementet.
Syntaks (returnettadresse for 'backgroundImage'-egenskapen)
gjenstand. stil . bakgrunnsbildeDenne syntaksen returnerer strengverdien som inneholder URL-en til bakgrunnsbildet som ble lagt til.
La oss bruke de ovenfor definerte syntaksene praktisk talt for å forklare bruken av stilegenskapen 'backgroundImage'.
Eksempel 1: Bruk stilegenskapen 'backgroundImage' for å angi bakgrunnsbildet
Dette eksemplet bruker stilen ' bakgrunnsbilde ”-egenskapen for å angi ønsket bakgrunnsbilde til dokumentet ved å spesifisere URL-en.
HTML-kode
Ta først en titt på den angitte HTML-koden:
< h2 > Bruk HTML DOM Stil backgroundImage Property i JavaScript h2 >
< knappen ved å klikke = 'myFunc()' > Klikk her knapp >
I denne koden:
- « ”-taggen legger til underoverskriften til nivå 2.
- «
'-tag lager en knapp med en vedlagt ' ved trykk ' hendelse for å utføre funksjonen ' myFunc() ' når knappen klikker.
JavaScript-kode
Deretter følger du den gitte JavaScript-koden:
< manus >funksjon myFunc ( ) {
dokument. kropp . stil . bakgrunnsbilde = 'url('./html&css/image.jpg')' ;
}
manus >
I kodebiten ovenfor:
- Funksjonen som heter ' myFunc() ' er definert.
- I sin definisjon, ' style.backgroundImage '-egenskapen bruker den angitte ' URL ”-bilde til bakgrunnen av hele dokumentet.
Produksjon
Utdataene viser at bakgrunnsbildet legges til hele dokumentet ved knappeklikk.
Eksempel 2: Bruk stilegenskapen 'backgroundImage' for å returnere URL-en til bakgrunnsbildet
« bakgrunnsbilde ”-egenskapen er også fordelaktig for å returnere URL-en til bakgrunnsbildet. La oss se det praktisk talt.
HTML-kode
Gå først gjennom den skrevne HTML-koden:
< h2 > Bruk HTML DOM Stil backgroundImage Property i JavaScript h2 >< div id = 'myDiv' stil = 'høyde: 500px; bredde: 500px;
kantlinje: 3px helt svart;background-image:url('./html&css/image.jpg')' > Dette er en div div >
< h4 id = 'demo' > h4 >
I kodeblokken ovenfor:
- « bakgrunnsbilde '-egenskapen brukes i ''-elementet som legger til et bakgrunnsbilde som tilsvarer den gitte URL-en.
- « ”-elementet oppretter en tom underoverskrift på nivå 4 som viser den returnerte verdien (URL) til bakgrunnsbildet som er lagt til.
JavaScript-kode
Fortsett nå til JavaScript-koden:
< manus >
la img = dokument. getElementById ( 'myDiv' ) . stil . bakgrunnsbilde ;
dokument. getElementById ( 'demo' ) . indreHTML = img ;
manus >I denne kodeblokken:
- Erklær variabelen ' img ' som bruker ' document.getElementById() '-metoden for å få tilgang til ''-elementet via dets id 'myDiv' og bruker et bakgrunnsbilde via ' bakgrunnsbilde ' eiendom.
- Deretter henter 'document.getElementById()'-metoden den tomme underoverskriften ved å bruke sin id 'demo' for å vise URL-en til det vedlagte bakgrunnsbildet.
Produksjon
Utdataene viser URL-en til bakgrunnsbildet brukt på 'div'-elementet.
Konklusjon
JavaScript bruker stilen ' bakgrunnsbilde ”-egenskap for å tilordne bakgrunnsbildet til ønsket HTML-element eller returnere dets URL. Den støtter fire egenskapsverdier for å angi bakgrunnsbildet, inkludert 'initial', 'arv', 'URL' og 'ingen'. Den støtter imidlertid ingen verdi for å få URL-en til bakgrunnsbildet. Dette innlegget ga en kort beskrivelse for å bruke HTML DOM-stilen 'backgroundImage'-egenskapen i JavaScript.