Ten post opisuje działanie i użycie właściwości HTML DOM Style „backgroundImage”.
Jak korzystać z właściwości HTML DOM „backgroundImage” w JavaScript?
Styl HTML DOM „ zdjęcie w tle ” służy do dostosowywania elementu HTML i dokumentu poprzez dołączenie obrazu tła poprzez odwołanie się do jego ścieżki.
Składnia (ustawianie właściwości „backgroundImage”)
obiekt. styl . zdjęcie w tle = 'url('URL')|brak|początkowy|dziedzicz'Powyższa składnia obsługuje następujące wartości właściwości „backgroundImage”:
- url('URL'): Określa lokalizację żądanego obrazu tła.
- nic: Reprezentuje wartość domyślną, tj. brak obrazu tła.
- wstępny: Jest podobny do domyślnej wartości przeglądarki.
- dziedziczyć: Dziedziczy właściwość z elementu nadrzędnego.
Składnia (zwracający adres URL właściwości „backgroundImage”)
obiekt. styl . zdjęcie w tleTa składnia zwraca wartość ciągu zawierającą adres URL dodanego obrazu tła.
Wykorzystajmy wyżej zdefiniowaną składnię do praktycznego wyjaśnienia zastosowania właściwości „backgroundImage” stylu.
Przykład 1: Zastosuj właściwość stylu „backgroundImage”, aby ustawić obraz tła
W tym przykładzie zastosowano styl „ zdjęcie w tle ”, aby ustawić żądany obraz tła dla dokumentu, określając jego adres URL.
Kod HTML
Najpierw spójrz na podany kod HTML:
< h2 > Używać HTML DOM Styl Właściwość backgroundImage w JavaScript h2 >
< przycisk po kliknięciu = 'mojaFunkcja()' > Kliknij tutaj przycisk >
W tym kodzie:
- „ ” dodaje podtytuł poziomu 2.
- „
” tag tworzy przycisk z dołączonym „ na kliknięcie ” zdarzenie do wykonania funkcji „ mojaFunkcja() ” po kliknięciu przycisku.
Kod JavaScript
Następnie postępuj zgodnie z podanym kodem JavaScript:
< scenariusz >funkcja mojaFunc ( ) {
dokument. ciało . styl . zdjęcie w tle = 'url('./html&css/image.jpg')' ;
}
scenariusz >
W powyższym fragmencie kodu:
- Funkcja o nazwie „ mojaFunkcja() ' definiuje.
- W swojej definicji „ styl.obraz tła ”właściwość dotyczy określonej” Adres URL ” na tło całego dokumentu.
Wyjście
Dane wyjściowe pokazują, że obraz tła jest dodawany do całego dokumentu po kliknięciu przycisku.
Przykład 2: Zastosuj właściwość „backgroundImage” stylu, aby zwrócić adres URL obrazu tła
„ zdjęcie w tle ” jest również korzystne, aby zwrócić adres URL obrazu tła. Zobaczmy to praktycznie.
Kod HTML
Najpierw przejrzyj napisany kod HTML:
< h2 > Używać HTML DOM Styl Właściwość backgroundImage w JavaScript h2 >< identyfikator div = „mój dział” styl = „wysokość: 500 pikseli; szerokość: 500 pikseli;
obramowanie: 3 piksele w kolorze czarnym; obraz w tle: url('./html&css/image.jpg')' > Ten jest div dz >
< identyfikator h4 = 'próbny' > h4 >
W powyższym bloku kodu:
- „ zdjęcie w tle ” jest używana w elemencie „”, który dodaje obraz tła odpowiadający podanemu adresowi URL.
- „ ” tworzy pusty podtytuł poziomu 4, który wyświetla zwróconą wartość (URL) dodanego obrazu tła.
Kod JavaScript
Teraz przejdź do kodu JavaScript:
< scenariusz >
niech img = dokument. getElementById ( „mój dział” ) . styl . zdjęcie w tle ;
dokument. getElementById ( 'próbny' ) . wewnętrzny HTML = img ;
scenariusz >W tym bloku kodu:
- Zadeklaruj zmienną „ img ”, który używa „ document.getElementById() ”, aby uzyskać dostęp do elementu „” za pomocą jego identyfikatora „myDiv” i zastosować obraz tła za pomocą „ zdjęcie w tle ' nieruchomość.
- Następnie metoda „document.getElementById()” pobiera pusty podtytuł, używając jego identyfikatora „demo”, aby wyświetlić adres URL dołączonego obrazu tła.
Wyjście
Dane wyjściowe wyświetlają adres URL obrazu tła zastosowanego do elementu „div”.
Wniosek
JavaScript używa stylu „ zdjęcie w tle ” do przypisania obrazu tła do żądanego elementu HTML lub zwrócenia jego adresu URL. Obsługuje cztery wartości właściwości, aby ustawić obraz tła, w tym „initial”, „inherit”, „URL” i „none”. Jednak nie obsługuje żadnej wartości do uzyskania adresu URL obrazu tła. Ten post zawierał krótki opis użycia właściwości HTML DOM „backgroundImage” w JavaScript.