If-Else 条件を使用して JavaScript で Div の背景画像を動的に変更する方法

JavaScript で Div 背景画像を変更する

質問:

背景を変更するにはどうすればよいですかif-else 条件を使用した JavaScript の div 要素の画像?

コード スニペット:

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

説明:

目標は、現在の背景画像に基づいてクラス「ghor」を持つ div の背景画像を更新することです。

答え:

これを達成するには、次のコードを使用できます:

<code class="javascript">document.getElementById('a').style.backgroundImage="url(images/img.jpg)";</code>

説明:

このコードは、ID「a」の div 要素を取得し、その背景画像スタイル プロパティを次のように設定します。指定された画像パス。 「images/img.jpg」を希望の画像パスに置き換えることで、背景画像を動的に変更できます。

「.ghor」クラスのサンプル CSS:

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

提供されているコードは説明を目的としており、特定の実装と CSS スタイルに基づいて調整が必要な場合があることに注意してください。

以上がIf-Else 条件を使用して JavaScript で Div の背景画像を動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。