style.backgroundAttachmentプロパティ

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は未対応。

サンプル

サンプルボックス要素
  1. 項目1
  2. 項目2
  3. 項目3
  4. 項目4
  5. 項目5
  6. 項目6
  7. 項目7
  8. 項目8
  9. 項目9
  10. 項目10

変更後の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>

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>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
  <li>項目6</li>
  <li>項目7</li>
  <li>項目8</li>
  <li>項目9</li>
  <li>項目10</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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, リファレンス, 背景 パーマリンク