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

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

How to Dynamically Change a Div's Background Image with JavaScript?

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

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