style.backgroundImageは、要素のスタイル属性のbackground-imageプロパティの値を取得、もしくは、設定するプロパティ。
background-imageプロパティは、要素の背景画像を指定することができる。
構文
取得
var $backgroundImage = $elementReference.style.backgroundImage;
戻り値
要素のスタイル属性のbackground-imageプロパティの値。
設定
$elementReference.style.backgroundImage = "url( image )";
- image
- 背景画像を指定する。。
- 下記の何れかの方法で指定する。初期設定値は、「none」。
- url( ‘imageUrl’ )：「imageUrl」に背景に使う画像のURLを指定する。
例えば「http://hoge.tld/sample.png」のURLの画像を背景に使うのであれば、url( 'http://hoge.tld/sample.png' )のように指定する。 - none：背景画像なし。
- inherit：親要素の「background-image」プロパティを継承。
- url( ‘imageUrl’ )：「imageUrl」に背景に使う画像のURLを指定する。
サンプル
サンプルボックス要素
変更後のスタイルのbackground-imageプロパティの値：
サンプルの動作について
- 「設定（紫陽花）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を紫陽花をイメージした画像に変更し、「変更後のスタイルのbackground-imageプロパティの値：」の右横に「url(“http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg”)」と表示する。
- 「設定（金）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を金をイメージした画像に変更し、「変更後のスタイルのbackground-imageプロパティの値：」の右横に「url(“http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012403.jpg”)」と表示する。
- 「設定（銀）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を銀をイメージした画像に変更し、「変更後のスタイルのbackground-imageプロパティの値：」の右横に「url(“http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012401.jpg”)」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBackground( $image ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundImage = "url( " + $image + " )";
var $backgroundImage = $elementReference.style.backgroundImage;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundImage;
}
</script>
function setBackground( $image ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundImage = "url( " + $image + " )";
var $backgroundImage = $elementReference.style.backgroundImage;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundImage;
}
</script>
HTML
<div id="sample" style="background-image: url('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg'); margin: 10px 0; width: 300px; height: 150px;">サンプルボックス要素</div>
<button onclick="setBackground('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg');">設定（紫陽花）</button>
<button onclick="setBackground('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012403.jpg');">設定（金）</button>
<button onclick="setBackground('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012401.jpg');">設定（銀）</button>
<p>変更後のスタイルのbackground-imageプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBackground('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg');">設定（紫陽花）</button>
<button onclick="setBackground('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012403.jpg');">設定（金）</button>
<button onclick="setBackground('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012401.jpg');">設定（銀）</button>
<p>変更後のスタイルのbackground-imageプロパティの値：<span id="sampleOutput"></span></p>