JavaScript を使用して Div の背景画像を動的に変更するにはどうすればよいですか?

JavaScript を使用して Div 背景画像を動的に更新する方法

Web ページを操作する場合、多くの場合、特定の要素の背景画像を動的に変更する必要があります。 JavaScript は、これを実現する簡単な方法を提供します。

指定した例では、特定のイベントが発生したときに (この場合は div をクリックして)、クラス "ghor" を持つ div の背景画像を変更したいと考えています。 ）。これを行うには、次の JavaScript コードを使用できます。

<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>

このコードは、最初に div の style 属性から現在の背景画像を取得します。画像が「Black-Wallpaper.jpg」の場合、代わりに背景画像が「cross1.png」に更新されます。すでに「cross1.png」である場合は、アラートが表示されます。

上記のコードを実装するには、クリック イベントを処理し、chek_mark 関数を呼び出す関数を作成できます。

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

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

div をクリックすると、chek_mark 関数が呼び出され、条件に従って背景画像が更新されます。

以上がJavaScript を使用して Div の背景画像を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。