Wie ändere ich das Hintergrundbild eines Divs dynamisch mit JavaScript?

So aktualisieren Sie Div-Hintergrundbilder mithilfe von JavaScript dynamisch

Bei der Arbeit mit Webseiten ist es häufig erforderlich, das Hintergrundbild bestimmter Elemente dynamisch zu ändern. JavaScript bietet eine einfache Möglichkeit, dies zu erreichen.

In dem von Ihnen bereitgestellten Beispiel möchten Sie das Hintergrundbild eines Divs mit der Klasse „ghor“ ändern, wenn ein bestimmtes Ereignis eintritt (in diesem Fall durch Klicken auf das Div). ). Dazu können Sie den folgenden JavaScript-Code verwenden:

<code class="javascript">function chek_mark() {
  var el = document.getElementById("a").style.backgroundImage;
  if (el.includes("Black-Wallpaper.jpg")) {
    el = "url('cross1.png')";
  } else if (el.includes("cross1.png")) {
    alert("This is working too.");
  }
}</code>

Dieser Code ruft zunächst das aktuelle Hintergrundbild aus dem Style-Attribut des Div ab. Wenn das Bild „Black-Wallpaper.jpg“ ist, wird das Hintergrundbild stattdessen auf „cross1.png“ aktualisiert. Wenn es bereits „cross1.png“ ist, wird eine Warnung angezeigt.

Um den obigen Code zu implementieren, können Sie eine Funktion erstellen, die das Klickereignis verarbeitet und die Funktion chek_mark aufruft:

<code class="html"><div class="ghor" id="a" onclick="change_background()">...</div></code>

<code class="javascript">function change_background() {
  chek_mark();
}</code>

Wenn auf das Div geklickt wird, wird die Funktion chek_mark aufgerufen und das Hintergrundbild gemäß Ihren Bedingungen aktualisiert.

Das obige ist der detaillierte Inhalt vonWie ändere ich das Hintergrundbild eines Divs dynamisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!