Heim >Web-Frontend >CSS-Tutorial >Wie ändere ich das Hintergrundbild eines Divs dynamisch mit JavaScript mithilfe einer If-Else-Bedingung?
Div-Hintergrundbild mit JavaScript ändern
Frage:
Wie kann ich den Hintergrund ändern? Bild eines div-Elements mit JavaScript unter Verwendung einer if-else-Bedingung?
Code-Snippet:
<code class="html"><div style="text-align:center;"> <div class="ghor" id="a" onclick="chek_mark()"></div> function call </div> <script type="text/javascript"> function chek_mark() { var el = document.getElementById("a").style.backgroundImage; if (el.url("Black-Wallpaper.jpg")) { el.url = "cross1.png"; } else if (el.url("cross1.png")) { alert("<h1>This is working too.</h1>"); } } </script></code>
Klarstellung:
Das Ziel besteht darin, das Hintergrundbild des Div mit der Klasse „ghor“ basierend auf dem aktuellen Hintergrundbild zu aktualisieren.
Antwort:
Um dies zu erreichen, Sie können den folgenden Code verwenden:
<code class="javascript">document.getElementById('a').style.backgroundImage="url(images/img.jpg)";</code>
Erklärung:
Dieser Code ruft das div-Element mit der ID „a“ ab und setzt seine Eigenschaft „Hintergrundbildstil“ auf der angegebene Bildpfad. Indem Sie „images/img.jpg“ durch den gewünschten Bildpfad ersetzen, können Sie das Hintergrundbild dynamisch ändern.
Beispiel-CSS für die Klasse „.ghor“:
<code class="css">.ghor { background-image: url('Black-Wallpaper.jpg'); background-size: cover; border-radius: 5px; height: 100px; width: 100px; box-shadow: 2px 5px 7px 7px white; display:inline-block; }</code>
Bitte beachten Sie, dass der bereitgestellte Code nur zur Veranschaulichung dient und möglicherweise Anpassungen basierend auf Ihrer spezifischen Implementierung und Ihren CSS-Stilen erfordert.
Das obige ist der detaillierte Inhalt vonWie ändere ich das Hintergrundbild eines Divs dynamisch mit JavaScript mithilfe einer If-Else-Bedingung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!