style.backgroundAttachmentは、要素のスタイル属性のbackground-attachmentプロパティの値を取得、もしくは、設定するプロパティ。
background-attachmentプロパティは、スクロール時に背景画像を固定表示させるか追随させるかを指定することができる。
構文
取得
var $backgroundAttachment = $elementReference.style.backgroundAttachment;
戻り値
要素のスタイル属性のbackground-attachmentプロパティの値。
設定
$elementReference.style.backgroundAttachment = "scroll | fixed | local";
- scroll | fixed | local
- スクロール時に、背景画像を固定表示させるか追随させるか。
- 下記の何れかの方法で指定する。初期設定値は、「scroll」。
- scroll：ウィンドウスクロール時は追随するが、親要素スクロール時は。追随しないで固定表示する。
- fixed：ウィンドウスクロール時も親要素スクロール時も追随しないで固定表示する。
- local：ウィンドウスクロール時も親要素スクロール時も追随する。2013/9/26現在、FireFoxは未対応。
サンプル
サンプルボックス要素
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- 項目７
- 項目８
- 項目９
- 項目１０
変更後のbackground-attachmentプロパティの値：
サンプルの動作について
- 「設定（scroll）」ボタンをクリックすると、「サンプルボックス要素」の背景画像は、ウィンドウスクロール時は追随するが、親要素スクロール時は。追随しないで固定表示する。「変更後のbackground-attachmentプロパティの値：」の右横に「scroll」と表示する。
- 「設定（fixed）」ボタンをクリックすると、「サンプルボックス要素」の背景画像は、ウィンドウスクロール時も親要素スクロール時も追随しないで固定表示する。「変更後のbackground-attachmentプロパティの値：」の右横に「fixed」と表示する。
- 「設定（local）」ボタンをクリックすると、「サンプルボックス要素」の背景画像は、ウィンドウスクロール時も親要素スクロール時も追随する。「変更後のbackground-attachmentプロパティの値：」の右横に「local」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBackground( $attachment ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundAttachment = $attachment;
var $backgroundAttachment = $elementReference.style.backgroundAttachment;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundAttachment;
}
</script>
function setBackground( $attachment ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundAttachment = $attachment;
var $backgroundAttachment = $elementReference.style.backgroundAttachment;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundAttachment;
}
</script>
HTML
<div id="sample" style="overflow: scroll; background: yellow url('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg'); margin: 10px 0; width: 300px; height: 200px;">
サンプルボックス要素
<ol>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
<li>項目６</li>
<li>項目７</li>
<li>項目８</li>
<li>項目９</li>
<li>項目１０</li>
</ol>
</div>
<button onclick="setBackground('scroll');">設定（scroll）</button>
<button onclick="setBackground('fixed');">設定（fixed）</button>
<button onclick="setBackground('local');">設定（local）</button>
<p>変更後のスタイルのbackground-attachmentプロパティの値：<span id="sampleOutput"></span></p>
サンプルボックス要素
<ol>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
<li>項目６</li>
<li>項目７</li>
<li>項目８</li>
<li>項目９</li>
<li>項目１０</li>
</ol>
</div>
<button onclick="setBackground('scroll');">設定（scroll）</button>
<button onclick="setBackground('fixed');">設定（fixed）</button>
<button onclick="setBackground('local');">設定（local）</button>
<p>変更後のスタイルのbackground-attachmentプロパティの値：<span id="sampleOutput"></span></p>