Ustaw obraz tła div za pośrednictwem funkcji w JavaScript

W trakcie wyróżnienia atrakcyjnych i responsywnych stron internetowych istnieje wymóg dodawania obrazów do modelu obiektu Dokument (DOM) po uruchomieniu funkcji. To ostatecznie prowadzi do tego, aby użytkownik pozostał na stronie i go zbadać, co skutkuje zwiększonym ruchem na korzyść programisty. W takich scenariuszach ustawienie obrazu tła DIV za pośrednictwem funkcji JavaScript zastanawia się w zapewnianiu dodatkowych funkcji.

W tym artykule wyjaśniono podejścia do ustawienia obrazu tła DIV za pomocą funkcji w JavaScript.

Jak ustawić obraz tła Div za pomocą funkcji w JavaScript?

Obraz tła Div za pomocą funkcji w JavaScript można ustawić za pomocą następujących podejść:

• "styl.zdjęcie w tle" nieruchomość.
• "setAttribute ()" metoda.

Podejście 1: Ustaw obraz tła Div za pomocą funkcji w JavaScript za pomocą stylu.właściwość w tle

„„zdjęcie w tle„Właściwość zwraca obraz tła elementu. Ta właściwość można wykorzystać do pobierania „div”Element za pomocą funkcji zdefiniowanej przez użytkownika i zastosuj do niej obraz tła.

Składnia

obiekt.styl.BackgroundImage = "url ('url') | back | inicjał | dziedziczy"

W podanej składni:

• "URL”Odnosi się do lokalizacji pliku obrazu.
• "z powrotem”Wskazuje na obraz tła.
• "wstępny”Odnosi się do wartości domyślnej właściwości.
• "dziedziczyć”Wskazuje dziedziczenie właściwości z jej elementu nadrzędnego.

Przykład
Śledźmy poniżej podanego przykładu:

To jest strona internetowa Linuxhint

Kliknij, aby zobaczyć efekt

W powyższym fragmencie kodu wykonaj następujące kroki:

• Zawierać "div”Element z określonym„ID”I dostosowane wymiary.
• Następnie uwzględnij podane nagłówek.
• Utwórz także przycisk z załączonym „na kliknięcie„Przekierowanie zdarzenia do funkcji BIVBACKROMNE ().

Przejdźmy do części kodu JavaScript:

W powyższym fragmencie kodu:

• Deklaruj funkcję o nazwie „Zaburzenie ()".
• W swojej definicji uzyskaj dostęp do dołączonych „div”Element po„ID" używając "dokument.getElementById ()" metoda.
• Na koniec zastosuj „styl.zdjęcie w tle”Właściwość z lokalizacją określonego obrazu jako„URL".
• Spowoduje to ustawienie obrazu tła na dołączony nagłówek i przycisk w „div".

Wyjście

W powyższym wyjściu widać, że obraz tła jest stosowany do zawartych „nagłówek" I "przycisk”W„ „div".

Podejście 2: Ustaw obraz tła Div przez funkcję w JavaScript za pomocą metody setAttribute ()

„„setAttribute ()„Metoda ustawia nową wartość atrybutu. Tę metodę można zastosować, aby ustawić atrybut jako „zdjęcie w tle”Do zawartej tabeli w„div" element.

Składnia

element.setAttribute (nazwa, wartość)

W powyższej składni:

• "nazwa”Odnosi się do nazwy atrybutu.
• "wartość”Wskazuje na wartość atrybutu.

Przykład
Rzućmy okiem na następujące wiersze kodu:

Sr.NIE	Nazwa	Miasto
1	David	Los Angeles

Kliknij, aby zobaczyć efekt

W powyższym fragmencie kodu:

• Zawierać "div”Element z określonym„ID".
• Zawierają również podane „tabela”W„ „div”Z określonymi wartościami„nagłówek stołowy" I "Data stołowa".
• W następnym kroku utwórz przycisk z załączonym „na kliknięcie„Wydarzenie wywołujące funkcję w tle MAGE ().

Kontynuujmy do części kodu JavaScript:

W powyższym fragmencie kodu wykonaj następujące kroki:

• Deklaruj funkcję o nazwie „zdjęcie w tle()".
• W swojej definicji uzyskaj dostęp do „div”Element po„ID" używając "dokument.getElementById ()" metoda.
• Następnie zastosuj „setAttribute ()„Metoda z ścieżką określonego obrazu, jak omówiono i„styl”Atrybut jako jego parametr.

Wyjście

Z powyższego wyjścia można zauważyć, że obraz tła jest dodawany do tabeli po kliknięciu przycisku.

Wniosek

„„styl.zdjęcie w tle„Własność lub„setAttribute ()”Metodę można wykorzystać do ustawienia obrazu tła DIV za pomocą funkcji w JavaScript. Poprzednie podejście można wdrożyć w celu uzyskania „div”Element za pomocą funkcji zdefiniowanej przez użytkownika i zastosuj do niej obraz tła. Ta ostatnia metoda można wykorzystać do ustawienia obrazu tła dołączonej tabeli, ustawiając jego atrybuty (obraz). Ten samouczek wyjaśnia, jak ustawić obraz tła Div za pomocą funkcji za pomocą JavaScript.