ホームページ > ウェブフロントエンド > CSSチュートリアル > If-Else 条件を使用して JavaScript で Div の背景画像を動的に変更する方法

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

Susan Sarandon
リリース: 2024-11-02 10:03:30
オリジナル
986 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート