style.backgroundは、要素のスタイル属性のbackgroundプロパティの値を取得、もしくは、設定するプロパティ。
backgroundプロパティは、要素の背景画像や背景色などを一括指定することができる。
構文
取得
var $background = $elementReference.style.background;
戻り値
要素のスタイル属性のbackgroundプロパティの値。
設定
$elementReference.style.background = "color image position repeat attachment";
- image
- 背景画像。
- 詳しくは、style.backgroundImageプロパティのページへ。
- repeat
- 水平方向（X軸）や垂直方向（Y軸）へ、背景画像を繰り返し表示するかどうか。
- 詳しくは、style.backgroundRepeatプロパティのページへ。
- attachment
- スクロール時に、背景画像を固定表示するか追随させるか。
- 詳しくは、style.backgroundAttachmentプロパティのページへ。
- position
- 背景画像の表示位置。
- 詳しくは、style.backgroundPositionプロパティのページへ。
- color
- 背景色。
- 詳しくは、style.backgroundColorプロパティのページへ。
サンプル
サンプルボックス要素
変更後のスタイルのbackgroundプロパティの値：
サンプルの動作について
- 「設定（紫陽花）」ボタンをクリックすると、「サンプルボックス要素」の背景に紫陽花をイメージした画像を並べ、「変更後のスタイルのbackgroundプロパティの値：」の右横に「url(“http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg”) repeat scroll left top yellow」と表示する。
- 「設定（金）」ボタンをクリックすると、「サンプルボックス要素」の背景に金をイメージした画像を並べ、「変更後のスタイルのbackgroundプロパティの値：」の右横に「url(“http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012403.jpg”) repeat scroll center top yellow」と表示する。
- 「設定（右上）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を右上に表示し、「変更後のスタイルのbackground-positionプロパティの値：」の右横に「url(“http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg”) no-repeat scroll right top yellow」と表示する。
- 「設定（緑色）」ボタンをクリックすると、「サンプルボックス要素」の背景色を緑色に変更し、「変更後のスタイルのbackgroundプロパティの値：」の右横に「none repeat scroll 0% 0% green」と表示する。
- 「設定（黄色）」ボタンをクリックすると、「サンプルボックス要素」の背景色を黄色に変更し、「変更後のスタイルのbackgroundプロパティの値：」の右横に「none repeat scroll 0% 0% yellow」と表示する。
- 「設定（赤色）」ボタンをクリックすると、「サンプルボックス要素」の背景色を赤色に変更し、「変更後のスタイルのbackgroundプロパティの値：」の右横に「none repeat scroll 0% 0% red」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBackground( $color ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.background = $color;
var $background = $elementReference.style.background;
document.getElementById( "sampleOutput" ).innerHTML = $background;
}
</script>
function setBackground( $color ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.background = $color;
var $background = $elementReference.style.background;
document.getElementById( "sampleOutput" ).innerHTML = $background;
}
</script>
HTML
<div id="sample" style="background: red; margin: 10px 0; width: 300px; height: 200px;">サンプルボックス要素</div>
<button onclick="setBackground('yellow url(\'http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg\') repeat top left');">設定（紫陽花）</button>
<button onclick="setBackground('yellow url(\'http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012403.jpg\') repeat top center');">設定（金）</button>
<button onclick="setBackground('yellow url(\'http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg\') no-repeat top right');">設定（右上）</button>
<button onclick="setBackground('green');">設定（緑色）</button>
<button onclick="setBackground('yellow');">設定（黄色）</button>
<button onclick="setBackground('red');">設定（赤色）</button>
<p>変更後のスタイルのbackgroundプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBackground('yellow url(\'http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg\') repeat top left');">設定（紫陽花）</button>
<button onclick="setBackground('yellow url(\'http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012403.jpg\') repeat top center');">設定（金）</button>
<button onclick="setBackground('yellow url(\'http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg\') no-repeat top right');">設定（右上）</button>
<button onclick="setBackground('green');">設定（緑色）</button>
<button onclick="setBackground('yellow');">設定（黄色）</button>
<button onclick="setBackground('red');">設定（赤色）</button>
<p>変更後のスタイルのbackgroundプロパティの値：<span id="sampleOutput"></span></p>