JavaScript には、通常はインターフェイスに適した暗い背景など、魅力的なレイアウトが必要な Web ページがあります。同様に、白い背景は読者がコンテンツに集中できるようにするため、ニュース ポータルやブログでは比較的明るい背景と暗いテキストを使用します。このような場合、JavaScript は文書のデザインをフォーマットしたり改善したりするのに非常に便利です。
この記事では、JavaScript で背景画像を変更する方法について説明します。
JavaScript で背景画像を変更するには?
JavaScript で背景画像を変更するには、次の方法を利用できます。
- 「 背景画像 ”のプロパティ” ドム 」。
- 「 getElementById() 「メソッドと」 背景画像 ”のプロパティ” 段落 」。
説明した方法を 1 つずつ実行してください。
方法 1: JavaScript で背景画像を変更する DOM の backgroundImage プロパティを使用します。
「 背景画像 」プロパティは、指定された要素の背景画像を調整します。この手法は、backgroundImage プロパティを適用し、パスを引数として指定して背景画像を指定することで適用できます。
構文
上記の構文では、「 URL 」は画像のパスを指します。
デモンストレーションについては、次の例を参照してください。
例
この例では、指定された値と「 オンクリック にリダイレクトするイベント
backgroundImage() という名前の関数:
さて、関数「 backgroundImage() 」が宣言され、「 document.body.style.backgroundImage 」プロパティは、引数で指定された画像パスを使用して背景画像にアクセスします。
上記の実装の出力は次のようになります。
方法 2: 段落の getElementById() メソッドと backgroundImage プロパティを使用して JavaScript で背景画像を変更する
「 getElementById() 」メソッドは、指定された値と「 背景画像 」プロパティは、前述のように、引数で指定された特定の要素の背景画像を返します。このメソッドは、特定の段落の背景に指定された色をマップするために適用できます。
構文
ここ、 ' 要素 」は要素のIDを参照します。
記載されている概念をよりよく理解するには、次の例を参照してください。
例
まず、
タグに段落を含め、特定の ID を割り当てます。
次に、前の方法で説明したように、関数 backgroundImage() にアクセスする onclick イベントを持つボタンを作成します。
最後に、「」という名前の関数を宣言します。 backgroundImage() 」 同様に。ここで、「 getElementById() 」メソッドを使用して、指定した背景画像を適用します。これにより、段落の背景に色が実装されます。
出力
Javascriptで背景画像を変更する最も簡単な方法をまとめました
結論
JavaScript で背景画像を変更するには、「 背景画像 ”のプロパティ” ドム 」関数を使用するか、「 getElementById() 「方法と適用」 背景画像 「指定されたプロパティ」 段落 」。このブログでは、JavaScript で背景画像を変更する方法について説明します。