Tento příspěvek popisuje fungování a použití vlastnosti HTML DOM Style „backgroundImage“.
Jak používat vlastnost „backgroundImage“ stylu HTML DOM v JavaScriptu?
HTML styl DOM ' backgroundImage Vlastnost ” se používá k přizpůsobení prvku HTML a dokumentu připojením obrázku na pozadí odkazem na jeho cestu.
Syntaxe (Nastavení vlastnosti „backgroundImage“)
objekt. styl . backgroundImage = 'url('URL')|žádné|počáteční|zdědit'Výše uvedená syntaxe podporuje následující hodnoty vlastnosti „backgroundImage“:
- url('URL'): Určuje umístění požadovaného obrázku na pozadí.
- žádný: Představuje výchozí hodnotu, tj. žádný obrázek na pozadí.
- počáteční: Je podobná výchozí hodnotě prohlížeče.
- zdědit: Zdědí vlastnost od svého nadřazeného prvku.
Syntaxe (vrácená adresa URL vlastnosti „backgroundImage“)
objekt. styl . backgroundImageTato syntaxe vrací hodnotu řetězce obsahující adresu URL přidaného obrázku na pozadí.
Použijme výše definované syntaxe prakticky k vysvětlení použití vlastnosti stylu „backgroundImage“.
Příklad 1: Použijte vlastnost Style „backgroundImage“ pro nastavení obrázku na pozadí
Tento příklad používá styl „ backgroundImage ” pro nastavení požadovaného obrázku na pozadí dokumentu zadáním jeho URL.
HTML kód
Nejprve se podívejte na uvedený HTML kód:
< h2 > Použití HTML DOM Styl Vlastnost backgroundImage v JavaScriptu h2 >
< tlačítko onclick = 'myFunc()' > Klikněte zde knoflík >
V tomto kódu:
- ' Značka ” přidá podnadpis úrovně 2.
- '
Značka „vytváří tlačítko s připojeným“ při kliknutí 'událost pro provedení funkce' myFunc() “ po kliknutí na tlačítko.
JavaScript kód
Dále postupujte podle daného kódu JavaScript:
< skript >funkce myFunc ( ) {
dokument. tělo . styl . backgroundImage = 'url('./html&css/obrazek.jpg')' ;
}
skript >
Ve výše uvedeném úryvku kódu:
- Funkce s názvem „ myFunc() ' je definováno.
- Ve své definici „ style.backgroundImage ” vlastnost použije zadané “ URL ” obrázek na pozadí celého dokumentu.
Výstup
Výstup ukazuje, že obrázek na pozadí je přidán do celého dokumentu po kliknutí na tlačítko.
Příklad 2: Použít vlastnost stylu „backgroundImage“ pro vrácení adresy URL obrázku na pozadí
' backgroundImage ” je také výhodná pro vrácení adresy URL obrázku na pozadí. Podívejme se na to prakticky.
HTML kód
Nejprve si projděte napsaný HTML kód:
< h2 > Použití HTML DOM Styl Vlastnost backgroundImage v JavaScriptu h2 >< div id = 'myDiv' styl = 'výška: 500px; šířka: 500px;
ohraničení: 3px plná černá;obrázek-pozadí:url('./html&css/obrazek.jpg')' > Tento je div div >
< h4 id = 'demo' > h4 >
Ve výše uvedeném bloku kódu:
- ' backgroundImage Vlastnost ” se používá v prvku „“, který přidává obrázek na pozadí odpovídající zadané URL.
- ' ” vytvoří prázdnou podnadpis úrovně 4, která zobrazuje vrácenou hodnotu (URL) přidaného obrázku na pozadí.
JavaScript kód
Nyní přejděte ke kódu JavaScript:
< skript >
nechat img = dokument. getElementById ( 'myDiv' ) . styl . backgroundImage ;
dokument. getElementById ( 'demo' ) . vnitřní HTML = img ;
skript >V tomto bloku kódu:
- Deklarujte proměnnou ' img “, který používá „ document.getElementById() ” pro přístup k prvku „“ prostřednictvím jeho id „myDiv“ a použití obrázku na pozadí prostřednictvím „ backgroundImage ' vlastnictví.
- Dále metoda „document.getElementById()“ načte prázdný podnadpis pomocí jeho id „demo“ k zobrazení adresy URL připojeného obrázku na pozadí.
Výstup
Výstup zobrazuje adresu URL obrázku na pozadí použitého na prvek „div“.
Závěr
JavaScript používá styl „ backgroundImage ” vlastnost pro přiřazení obrázku na pozadí k požadovanému HTML elementu nebo vrácení jeho URL. Podporuje čtyři hodnoty vlastností pro nastavení obrázku na pozadí, včetně „počáteční“, „dědit“, „URL“ a „žádné“. Nepodporuje však žádnou hodnotu pro získání adresy URL obrázku na pozadí. Tento příspěvek poskytl stručný popis použití vlastnosti „backgroundImage“ stylu HTML DOM v JavaScriptu.