V JavaScriptu existují webové stránky, které potřebují atraktivní rozvržení, například tmavé pozadí, které obvykle funguje lépe pro rozhraní. Podobně bílé pozadí umožňuje čtenářům soustředit se na obsah, a tak zpravodajské portály nebo blogy používají poměrně světlé pozadí s tmavým textem. V takových případech se JavaScript stává velmi užitečným při formátování a zlepšování designu dokumentů.
Tento článek pojednává o metodách změny obrázku na pozadí v JavaScriptu.
Jak změnit obrázek na pozadí v JavaScriptu?
Chcete-li změnit obrázek na pozadí v JavaScriptu, lze použít následující přístupy:
- “ backgroundImage “nemovitost na “ DOM “.
- “ getElementById() “ metoda a “ backgroundImage “nemovitost na “ odstavec “.
Projděte si diskutované metody jednu po druhé!
Metoda 1: Změňte obrázek pozadí v JavaScriptu pomocí vlastnosti backgroundImage na DOM.
' backgroundImage Vlastnost ” upravuje obrázek na pozadí zadaného prvku. Tuto techniku lze použít použitím vlastnosti backgroundImage a určením obrázku na pozadí umístěním jeho cesty jako argumentu.
Syntax
Ve výše uvedené syntaxi „ URL “ označuje cestu obrázku.
Pro demonstraci se podívejte na následující příklad.
Příklad
V tomto příkladu bude zahrnuto tlačítko se zadanou hodnotou a „ při kliknutí ” přesměrování události na a
funkce s názvem backgroundImage():
Nyní funkce ' backgroundImage() “ bude vyhlášeno a “ document.body.style.backgroundImage Vlastnost ” přistoupí k obrázku na pozadí pomocí zadané cesty obrázku ve svém argumentu:
Výsledkem výše uvedené implementace bude následující:
Metoda 2: Změna obrázku pozadí v JavaScriptu pomocí metody getElementById() a vlastnosti backgroundImage v odstavci
' getElementById() metoda vrací prvek se zadanou hodnotou a znakem backgroundImage ” vlastnost, jak je uvedeno výše, vrací obrázek na pozadí konkrétního prvku zadaného v jeho argumentu. Tuto metodu lze použít k mapování zadané barvy na pozadí konkrétního odstavce.
Syntax
Tady, ' Prvky ” odkazuje na id prvku.
Pro lepší pochopení uvedeného konceptu si projděte následující příklad.
Příklad
Nejprve zahrňte odstavec do značky
a přiřaďte mu konkrétní ID:
Dále vytvořte tlačítko s událostí onclick s přístupem k funkci backgroundImage(), jak bylo popsáno v předchozí metodě:
Nakonec deklarujte funkci s názvem „ backgroundImage() “ podobně. Zde získáte přístup k definovanému ID pomocí „ getElementById() “ a aplikujte na něj určený obrázek na pozadí. Výsledkem bude implementace barvy na pozadí odstavce:
Výstup
Sestavili jsme nejjednodušší metodu pro změnu obrázku na pozadí v Javascriptu
Závěr
Chcete-li změnit obrázek na pozadí v JavaScriptu, použijte „ backgroundImage “nemovitost na “ DOM ” pro použití zadaného obrázku na pozadí na celou webovou stránku pomocí funkce nebo získání konkrétního ID pomocí “ getElementById() “ metoda a použití “ backgroundImage „vlastnost na zadaném“ odstavec “. Tento blog ilustruje metody změny obrázků na pozadí v JavaScriptu.