JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript DOMで要素の背景画像を設定する方法をわかりやすく解説

JavaScriptで背景画像を設定するには、backgroundImageプロパティを使用します。このプロパティはCSSのbackground-imageに対応しており、要素の背景画像を動的に変更できます。

backgroundImageプロパティの基本

document.body.style.backgroundImageのように、対象要素のstyleオブジェクト経由でアクセスし、値としてurl('画像のパス')を指定します。ボタンのクリックイベントなどと組み合わせれば、ユーザーの操作に応じて背景画像を切り替えることも可能です。

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときにページ全体の背景画像が設定されます。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">クリックして背景画像を設定</button>
      <script>
         function display() {
            document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
         }
      </script>
   </body>
</html>

実行結果のポイント

ボタンをクリックするとdisplay()関数が呼び出され、body要素の背景画像が指定したURLの画像に変更されます。

補足：見た目を整えるための関連プロパティ

背景画像を設定する際は、以下のプロパティと組み合わせるとより実用的な表示になります。

backgroundRepeat： 画像の繰り返しを制御します。no-repeatを指定すると画像が1回だけ表示されます。
backgroundSize： 画像のサイズを調整します。coverを指定すると要素全体を覆うように表示されます。
backgroundPosition： 画像の表示位置を指定します。centerなどを設定すると中央に配置されます。

設定例：

document.body.style.backgroundImage = "url('sample.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";

このように、JavaScriptのDOM操作を活用すれば、CSSを事前に定義しなくても動的に背景画像を制御できます。

  1. JavaScriptで要素の不透明度（opacity）を設定する方法【初心者向け解説】

    JavaScriptで要素の不透明度（透明度）を設定するには、CSSの opacity プロパティを使用します。style オブジェクト経由で opacity に「0 ～ 1」の範囲の値を指定することで、要素を好きな透明度で表示できます。 値が「1」なら完全に不透明、「0」なら完全に透明になります。例えば「0.5」を設定すると、要素は半透明で表示されます。 サンプルコード 以下のコードでは、ボタンをクリックすると div 要素の不透明度が「0.5」（半透明）に変更されます。実際に動作を確認してみましょう。 <!DOCTYPE html> <html> <head&

  2. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE