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!