style.backgroundPositionは、要素のスタイル属性のbackground-positionプロパティの値を取得、もしくは、設定するプロパティ。
background-positionプロパティは、要素の背景画像の位置を指定することができる。
構文
取得
var $backgroundPosition = $elementReference.style.backgroundPosition;
戻り値
要素のスタイル属性のbackground-positionプロパティの値。
設定
$elementReference.style.backgroundPosition = "position";
- position
- 背景画像を表示する位置。
- 下記の何れかの方法で指定する。初期設定値は、「0% 0%」。
- left top：左上。
- center top：中央上。
- right top：右上。
- left center：左中央。
- center center：中央。
- right center：右中央。
- left bottom：左下。
- center bottom：中央下。
- right bottom：右下。
- x% y%：「x」に左端からの距離、「y」に上からの距離を、割合で指定。
- x y：「x」に左端からの距離、「y」に上からの距離を指定。
- inherit：親要素の「background-position」プロパティを継承。
サンプル
サンプルボックス要素
変更後のスタイルのbackground-positionプロパティの値：
サンプルの動作について
- 「設定（右上）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を右上に表示し、「変更後のスタイルのbackground-positionプロパティの値：」の右横に「right top」と表示する。
- 「設定（中央）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を中央に表示し、「変更後のスタイルのbackground-positionプロパティの値：」の右横に「center center」と表示する。
- 「設定（左下）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を右上に表示し、「変更後のスタイルのbackground-positionプロパティの値：」の右横に「left bottom」と表示する。
- 「設定（75% 75%）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を、左から75%、上から75%の位置に表示し、「変更後のスタイルのbackground-positionプロパティの値：」の右横に「75% 75%」と表示する。
- 「設定（20px 20px）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を、左から20px、上から20pxの位置に表示し、「変更後のスタイルのbackground-positionプロパティの値：」の右横に「20px 20px」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBackground( $position ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundPosition = $position;
var $backgroundPosition = $elementReference.style.backgroundPosition;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundPosition;
}
</script>
function setBackground( $position ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundPosition = $position;
var $backgroundPosition = $elementReference.style.backgroundPosition;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundPosition;
}
</script>
HTML
<div id="sample" style="background: yellow url('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg') no-repeat top right; margin: 10px 0; width: 300px; height: 200px;">サンプルボックス要素</div>
<button onclick="setBackground('right top');">設定（右上）</button>
<button onclick="setBackground('center center');">設定（中央）</button>
<button onclick="setBackground('left bottom');">設定（左下）</button>
<button onclick="setBackground('75% 75%');">設定（75% 75%）</button>
<button onclick="setBackground('20px 20px');">設定（20px 20px）</button>
<p>変更後のスタイルのbackground-positionプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBackground('right top');">設定（右上）</button>
<button onclick="setBackground('center center');">設定（中央）</button>
<button onclick="setBackground('left bottom');">設定（左下）</button>
<button onclick="setBackground('75% 75%');">設定（75% 75%）</button>
<button onclick="setBackground('20px 20px');">設定（20px 20px）</button>
<p>変更後のスタイルのbackground-positionプロパティの値：<span id="sampleOutput"></span></p>