style.clipプロパティ

投稿日: 2013年10月7日 作成者: alphasis

style.clipは、要素のスタイル属性のclipプロパティの値を取得、もしくは、設定するプロパティ。

clipプロパティは、ボックス要素を矩形切り抜き表示することができる。

構文

取得

var $clip = $elementReference.style.clip;

戻り値

要素のスタイル属性のclipプロパティの値。

設定

$elementReference.style.clip = "value";
value
下記の何れかの値を指定する。初期設定値は「auto」。
  • auto：切り抜かず、要素全体を表示する。
  • rect( top, right, bottom, left )：切り抜き位置を指定する。
    • top：要素の上端から切り抜き後の上端までの距離。
    • right：要素の左端から切り抜き後の右端までの距離。
    • bottom：要素の上端から切り抜き後の下端までの距離。
    • left：要素の左端から切り抜き後の左端までの距離。
  • inherit：親要素の設定を継承。

サンプル


サンプル要素の変更後のclipプロパティの値：

サンプル要素
  1. 項目
  2. 項目
  3. 項目
  4. 項目
  5. 項目

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストをclipプロパティの値に設定し、設定値を「サンプル要素の変更後のclipプロパティの値：」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setClip( $clip ) {
 var $element = document.getElementById( "sample" );
 $element.style.clip = $clip;
 var $clip = $element.style.clip;
 document.getElementById( "sampleOutput" ).innerHTML = $clip;
}
</script>

HTML

<button onclick="setClip('auto');">visible</button>
<button onclick="setClip('rect( 0px, 400px, 150px, 0px )');">rect( 0px, 400px, 150px, 0px )</button>
<button onclick="setClip('rect( 0px, 100px, 150px, 0px )');">rect( 0px, 100px, 150px, 0px )</button>
<button onclick="setClip('rect( 50px, 300px, 150px, 20px )');">rect( 50px, 300px, 150px, 20px )</button>
<button onclick="setClip('inherit');">inherit</button>
<br />
<p>サンプル要素の変更後のclipプロパティの値：<span id="sampleOutput"></span></p>
<div style="width: 580px; height: 260px; border: 1px solid gray;">
 <div id="sample" style="position: absolute; margin: 20px; padding: 10px 20px;width: 500px; height: 200px; border: 1px solid red; background-color: yellow;">
  サンプル要素
  <ol>
   <li>項目</li>
   <li>項目</li>
   <li>項目</li>
   <li>項目</li>
   <li>項目</li>
  </ol>
 </div>
</div>

スポンサード リンク

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