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

JavaScript DOMで1つの宣言ですべての背景プロパティを一括設定する方法

JavaScriptで要素の背景をまとめて設定するには、backgroundプロパティを使用します。これはCSSの一括指定（ショートハンド）プロパティに相当し、背景色、背景画像、繰り返し方法、表示位置などを、たった1つの宣言だけで同時に設定できます。

backgroundプロパティで指定できる主な値

  • background-color … 背景色
  • background-image … 背景画像（url()で指定）
  • background-repeat … 画像の繰り返し方法（repeat、no-repeatなど）
  • background-position … 画像の表示位置（right topなど）

サンプルコード

次のコードを実行すると、ボタンをクリックしたときに、背景画像・繰り返し・位置を1つの宣言でまとめて設定する動作を確認できます。

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

コードの解説

ボタンがクリックされるとdisplay()関数が呼び出されます。関数内ではdocument.body.style.backgroundに対して、「url(...)」による背景画像、「repeat」による繰り返し指定、「right top」による右上部への配置を、スペース区切りの1つの文字列として代入しています。これにより、各背景プロパティを個別に設定することなく、1回の宣言ですべてを適用できます。

なお、値の記述順序はある程度自由ですが、背景サイズ（background-size）も同時に指定したい場合は「right top / cover」のように、位置とサイズをスラッシュ（/）で区切る必要がある点に注意してください。

  1. 1つの宣言でCSSマージンプロパティを設定するにはどうすればよいですか？

    CSSのmarginプロパティは、HTML要素の周囲にある余白（スペース）を定義します。負の値を指定することで、隣接するコンテンツ同士を意図的に重ねて表示することも可能です。 また、marginプロパティはショートハンド（省略形）プロパティとして機能し、上下左右それぞれのマージンを個別に宣言しなくても、たった1つの宣言だけでまとめて設定できます。 marginショートハンドの値の指定ルール 指定する値の数によって、適用される辺が変わります。 値が1つの場合： 上下左右のすべての辺に同じ値が適用されます（例： margin: 20px;） 値が2つの場合： 1つ目が上下、2つ目が左右に適用さ

  2. CSSのbackgroundプロパティで背景画像の各種設定を1行でまとめて指定する方法

    CSSのbackgroundプロパティを使うと、背景色・背景画像・繰り返し方法・スクロールの有無・表示位置など、背景に関するすべてのプロパティを1つの宣言にまとめて設定できます。個別にbackground-colorやbackground-imageなどを指定する代わりに、この一括指定（ショートハンド）プロパティを利用することで、コードがすっきりし、スタイルの管理も容易になります。指定できる主な値background-color … 背景色（例：lightblue）background-image … 背景画像のURL（例：url(sample.jpg)）background-repeat …