Jak zmienić obraz tła w JavaScript

W JavaScript istnieją strony internetowe, które wymagają atrakcyjnego układu, takiego jak ciemne tła, które zwykle działają lepiej dla interfejsów. Podobnie białe tła pozwala czytelnikom skupić się na treści, a więc portale wiadomości lub blogi używają stosunkowo lekkiego tła z ciemnym tekstem. W takich przypadkach JavaScript staje się bardzo przydatny w formatowaniu i poprawie projektowania dokumentów.

W tym artykule omówiono metody zmiany obrazu tła w JavaScript.

Jak zmienić obraz tła w JavaScript?

Aby zmienić obraz tła w JavaScript, można zastosować następujące podejścia:

• "zdjęcie w tle„Nieruchomość”Dom".
• "getElementById ()”Metoda i„zdjęcie w tle„Nieruchomość”ustęp".

Przejrzyj omawiane metody jeden po drugim!

Metoda 1: Zmień obraz tła w JavaScript za pomocą właściwości w tle Własność DOM.

„„zdjęcie w tle”Właściwość dostosowuje obraz tła określonego elementu. Technikę tę można zastosować, stosując właściwość tła i określić obraz tła, lokalizując jego ścieżkę jako argument.

Składnia

W powyższej składni „URL”Odnosi się do ścieżki obrazu.

Spójrz na poniższy przykład demonstracji.

Przykład

W tym przykładzie przycisk zostanie dołączony do określonej wartości i „na kliknięcie„Przekierowanie wydarzenia do
Funkcja o nazwie BackgroundImage ():

Teraz funkcja „zdjęcie w tle()„Zostanie zadeklarowane i„dokument.ciało.styl.zdjęcie w tle„Własność dostępu do obrazu tła za pomocą określonej ścieżki obrazu w jego argumencie:

Wyjście powyższej implementacji spowoduje następujący sposób:

Metoda 2: Zmień obraz tła w JavaScript przy użyciu metody getElementById () i właściwości w tle w akapicie

„„getElementById ()”Metoda zwraca element o określonej wartości i„zdjęcie w tle„Własność, jak wspomniano powyżej, zwraca obraz tła konkretnego elementu określonego w jego argumencie. Tę metodę można zastosować do mapowania określonego koloru na tle konkretnego akapitu.

Składnia

Tutaj, "ElementId”Odnosi się do identyfikatora elementu.

Przejrzyj następujący przykład, aby lepiej zrozumieć określoną koncepcję.

Przykład

Po pierwsze, dołącz akapit w

oznacz i przypisz go konkretny identyfikator:

Następnie utwórz przycisk z zdarzeniem OnClick, który uzyskuje dostęp do funkcji w tleMage (), jak omówiono w poprzedniej metodzie:

Na koniec zadeklaruj funkcję o nazwie „zdjęcie w tle()" podobnie. Tutaj uzyskaj dostęp do zdefiniowanego identyfikatora za pomocą „getElementById ()”Metoda i zastosuj na nim określony obraz tła. Spowoduje to wdrożenie koloru na tle akapitu:

Wyjście

Skompilowaliśmy najłatwiejszą metodę zmiany obrazu tła w JavaScript

Wniosek

Aby zmienić obraz tła w JavaScript, zastosuj „zdjęcie w tle„Nieruchomość”Dom”W celu zastosowania określonego obrazu tła na całej stronie internetowej za pomocą funkcji lub przy użyciu konkretnego identyfikatora za pomocą„getElementById ()„Metoda i stosowanie”zdjęcie w tle„Własność w określonym„ustęp". Ten blog ilustruje metody zmiany obrazów w JavaScript.