In diesem Beitrag wird die Funktionsweise und Verwendung der Eigenschaft „backgroundImage“ des HTML-DOM-Stils beschrieben.
Wie verwende ich die Eigenschaft „backgroundImage“ im HTML-DOM-Stil in JavaScript?
Der HTML-DOM-Stil „ Hintergrundbild Die Eigenschaft „wird verwendet, um das HTML-Element und das Dokument anzupassen, indem ein Hintergrundbild unter Bezugnahme auf seinen Pfad angehängt wird.
Syntax (Festlegen der Eigenschaft „backgroundImage“)
Objekt. Stil . Hintergrundbild = 'url('URL')|none|initial|inherit'Die obige Syntax unterstützt die folgenden „backgroundImage“-Eigenschaftswerte:
- URL('URL'): Es gibt die Position des gewünschten Hintergrundbilds an.
- keiner: Es stellt den Standardwert dar, d. h. kein Hintergrundbild.
- Initial: Es ähnelt dem Standardwert des Browsers.
- erben: Es erbt die Eigenschaft von seinem übergeordneten Element.
Syntax (Rückgabe-URL der Eigenschaft „backgroundImage“)
Objekt. Stil . HintergrundbildDiese Syntax gibt den Zeichenfolgenwert zurück, der die URL des hinzugefügten Hintergrundbilds enthält.
Lassen Sie uns die oben definierten Syntaxen praktisch verwenden, um die Verwendung der Stileigenschaft „backgroundImage“ zu erklären.
Beispiel 1: Wenden Sie die Style-Eigenschaft „backgroundImage“ an, um das Hintergrundbild festzulegen
In diesem Beispiel wird der Stil „ Hintergrundbild ”-Eigenschaft, um das gewünschte Hintergrundbild für das Dokument festzulegen, indem Sie dessen URL angeben.
HTML Quelltext
Schauen Sie sich zunächst den angegebenen HTML-Code an:
< h2 > Verwenden HTML DOM Stil backgroundImage-Eigenschaft in JavaScript h2 >
< Schaltfläche onclick = „myFunc()“ > Klicken Sie hier Taste >
In diesem Code:
- Der ' „Tag fügt die Unterüberschrift der Ebene 2 hinzu.
- Der '
„Tag“ erstellt eine Schaltfläche mit angehängtem „ onclick „Ereignis zum Ausführen der Funktion“ myFunc() ” beim Klicken auf die Schaltfläche.
JavaScript-Code
Folgen Sie als Nächstes dem angegebenen JavaScript-Code:
< Skript >Funktion myFunc ( ) {
dokumentieren. Körper . Stil . Hintergrundbild = 'url('./html&css/image.jpg')' ;
}
Skript >
Im obigen Codeausschnitt:
- Die Funktion namens „ myFunc() ' ist definiert.
- In seiner Definition lautet „ style.backgroundImage „Eigenschaft wendet die angegebene“ URL ”-Bild in den Hintergrund des gesamten Dokuments einfügen.
Ausgang
Die Ausgabe zeigt, dass das Hintergrundbild beim Klicken auf die Schaltfläche dem gesamten Dokument hinzugefügt wird.
Beispiel 2: Wenden Sie die Style-Eigenschaft „backgroundImage“ an, um die URL des Hintergrundbilds zurückzugeben
Der ' Hintergrundbild „-Eigenschaft ist auch nützlich, um die URL des Hintergrundbilds zurückzugeben. Schauen wir es uns praktisch an.
HTML Quelltext
Gehen Sie zunächst den geschriebenen HTML-Code durch:
< h2 > Verwenden HTML DOM Stil backgroundImage-Eigenschaft in JavaScript h2 >< Div-ID = „myDiv“ Stil = 'Höhe: 500px; Breite: 500px;
Rahmen: 3 Pixel durchgehend schwarz;background-image:url('./html&css/image.jpg')' > Das ist ein div div >
< h4-ID = 'Demo' > h4 >
Im obigen Codeblock:
- Der ' Hintergrundbild Die Eigenschaft „wird im Element „“ verwendet, das ein Hintergrundbild hinzufügt, das der angegebenen URL entspricht.
- Der ' Das Element erstellt eine leere Unterüberschrift der Ebene 4, die den zurückgegebenen Wert (URL) des hinzugefügten Hintergrundbilds anzeigt.
JavaScript-Code
Fahren Sie nun mit dem JavaScript-Code fort:
< Skript >
lass img = dokumentieren. getElementById ( „myDiv“ ) . Stil . Hintergrundbild ;
dokumentieren. getElementById ( 'Demo' ) . innerHTML = Bild ;
Skript >In diesem Codeblock:
- Deklarieren Sie die Variable „ Bild ” das verwendet das „ document.getElementById() ”-Methode, um über seine ID „myDiv“ auf das „“-Element zuzugreifen und über die „ Hintergrundbild ' Eigentum.
- Als nächstes ruft die Methode „document.getElementById()“ die leere Unterüberschrift mit ihrer ID „demo“ ab, um die URL des angehängten Hintergrundbilds anzuzeigen.
Ausgang
Die Ausgabe zeigt die URL des Hintergrundbilds an, das auf das „div“-Element angewendet wird.
Abschluss
JavaScript verwendet den Stil „ Hintergrundbild ”-Eigenschaft, um das Hintergrundbild dem gewünschten HTML-Element zuzuordnen oder dessen URL zurückzugeben. Es unterstützt vier Eigenschaftswerte zum Festlegen des Hintergrundbilds, darunter „initial“, „inherit“, „URL“ und „none“. Es unterstützt jedoch keinen Wert zum Abrufen der URL des Hintergrundbilds. Dieser Beitrag enthielt eine kurze Beschreibung zur Verwendung der HTML-DOM-Stil-Eigenschaft „backgroundImage“ in JavaScript.