Heim  >  Artikel  >  Web-Frontend  >  Wie ändere ich das Hintergrundbild eines Divs dynamisch mit JavaScript mithilfe einer If-Else-Bedingung?

Wie ändere ich das Hintergrundbild eines Divs dynamisch mit JavaScript mithilfe einer If-Else-Bedingung?

Susan Sarandon
Susan SarandonOriginal
2024-11-02 10:03:30904Durchsuche

How to Dynamically Change a Div's Background Image with JavaScript Using an If-Else Condition?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn