Ovaj post opisuje rad i korištenje svojstva 'backgroundImage' HTML DOM stila.
Kako koristiti svojstvo “backgroundImage” HTML DOM stila u JavaScriptu?
HTML DOM stil “ pozadinska slika ” Svojstvo se koristi za prilagodbu HTML elementa i dokumenta dodavanjem pozadinske slike upućivanjem na njegovu putanju.
Sintaksa (postavljanje svojstva “backgroundImage”)
objekt. stil . pozadinska slika = 'url('URL')|ništa|početno|naslijediti'Gornja sintaksa podržava sljedeće vrijednosti svojstva 'backgroundImage':
- url('URL'): Određuje mjesto željene pozadinske slike.
- nijedan: Predstavlja zadanu vrijednost, tj. nema pozadinske slike.
- početni: Slično je zadanoj vrijednosti preglednika.
- naslijediti: Nasljeđuje svojstvo od nadređenog elementa.
Sintaksa (povratni URL svojstva “backgroundImage”)
objekt. stil . pozadinska slikaOva sintaksa vraća vrijednost niza koja sadrži URL dodane pozadinske slike.
Upotrijebimo gore definirane sintakse praktično da objasnimo upotrebu svojstva stila 'backgroundImage'.
Primjer 1: Primijenite svojstvo stila “backgroundImage” za postavljanje pozadinske slike
Ovaj primjer primjenjuje stil ' pozadinska slika ” za postavljanje željene pozadinske slike za dokument navođenjem njegovog URL-a.
HTML kôd
Prvo pogledajte navedeni HTML kod:
< h2 > Koristiti HTML DOM Stil svojstvo backgroundImage u JavaScriptu h2 >
< gumb na klik = 'myFunc()' > Kliknite ovdje dugme >
U ovom kodu:
- ' ” dodaje podnaslov razine 2.
- '
' oznaka stvara gumb s priloženom ' na klik ” događaj za izvršenje funkcije “ myFunc() ” nakon klika na gumb.
JavaScript kod
Zatim slijedite navedeni JavaScript kod:
< skripta >funkcija myFunc ( ) {
dokument. tijelo . stil . pozadinska slika = 'url('./html&css/image.jpg')' ;
}
skripta >
U gornjem isječku koda:
- Funkcija pod nazivom ' myFunc() ' je definirano.
- U svojoj definiciji, ' style.backgroundImage ” svojstvo primjenjuje navedeno “ URL ” sliku na pozadinu cijelog dokumenta.
Izlaz
Izlaz pokazuje da se pozadinska slika dodaje cijelom dokumentu nakon klika na gumb.
Primjer 2: Primjena svojstva stila “backgroundImage” za vraćanje URL-a pozadinske slike
' pozadinska slika ” svojstvo je također korisno za vraćanje URL-a pozadinske slike. Pogledajmo to praktično.
HTML kôd
Prvo prođite kroz napisani HTML kod:
< h2 > Koristiti HTML DOM Stil svojstvo backgroundImage u JavaScriptu h2 >< div id = 'myDiv' stil = 'visina: 500px; širina: 500px;
rub: 3px puna crna;background-image:url('./html&css/image.jpg')' > Ovaj je div div >
< h4 id = 'demo' > h4 >
U gornjem bloku koda:
- ' pozadinska slika ” Svojstvo se koristi u elementu “” koji dodaje pozadinsku sliku koja odgovara zadanom URL-u.
- ' ” stvara prazan podnaslov razine 4 koji prikazuje vraćenu vrijednost (URL) dodane pozadinske slike.
JavaScript kod
Sada prijeđite na JavaScript kod:
< skripta >
neka img = dokument. getElementById ( 'myDiv' ) . stil . pozadinska slika ;
dokument. getElementById ( 'demo' ) . unutarnjiHTML = img ;
skripta >U ovom bloku koda:
- Deklarirajte varijablu ' img ' koji koristi ' document.getElementById() ” za pristup elementu “” preko njegovog ID-a “myDiv” i primjenjuje pozadinsku sliku putem “ pozadinska slika ” vlasništvo.
- Zatim, metoda “document.getElementById()” dohvaća prazan podnaslov koristeći njegov ID “demo” za prikaz URL-a dodane pozadinske slike.
Izlaz
Izlaz prikazuje URL pozadinske slike primijenjene na element 'div'.
Zaključak
JavaScript koristi stil ' pozadinska slika ” svojstvo za dodjeljivanje pozadinske slike željenom HTML elementu ili vraćanje njegovog URL-a. Podržava četiri vrijednosti svojstava za postavljanje pozadinske slike uključujući 'početno', 'naslijediti', 'URL' i 'ništa'. Međutim, ne podržava nikakvu vrijednost za dobivanje URL-a pozadinske slike. Ovaj je post dao kratak opis korištenja svojstva “backgroundImage” stila HTML DOM-a u JavaScriptu.