style.clearプロパティ

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

clearプロパティは、style.cssFloatプロパティで指定した要素の回り込みを解除することができる。

構文

取得

var $clear = $elementReference.style.clear;

戻り値

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

設定

$elementReference.style.clear = "none | left | right | both | inherit";
none | left | right | both | inherit
何れかの値を指定する。初期設定値は「none」。
  • none:解除しない。
  • left:左寄せ右回り込みを解除。
  • right:右寄せ左回り込みを解除。
  • both:左寄せ右回り込みも、右寄せ左回り込みも、両方解除。
  • inherit:親要素の設定を継承。

サンプル


変更後のclearプロパティの値:

サンプル要素1
サンプル要素2
サンプル要素3
サンプル要素4

サンプルの動作について

  • 「設定(none)」ボタンをクリックすると、回り込みを解除しない。「変更後のclearプロパティの値:」の右横に「none」と表示する。
  • 「設定(left)」ボタンをクリックすると、「サンプル要素3」の左寄せ右回り込みを解除する。「変更後のclearプロパティの値:」の右横に「left」と表示する。
  • 「設定(right)」ボタンをクリックすると、右寄せ左回り込みを解除しようとするが、「サンプル要素3」の左寄せ右回り込みは解除できない。「変更後のclearプロパティの値:」の右横に「right」と表示する。
  • 「設定(both)」ボタンをクリックすると、左寄せ右回り込みも右寄せ左回り込みも両方解除するので、「サンプル要素3」の左寄せ右回り込みを解除する。「変更後のclearプロパティの値:」の右横に「both」と表示する。

サンプルのソースコード

JavaScript

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

HTML

<div style="clear: both;">
 <button onclick="setClear('none');">設定(none)</button>
 <button onclick="setClear('left');">設定(left)</button>
 <button onclick="setClear('right');">設定(right)</button>
 <button onclick="setClear('both');">設定(both)</button>
 <br />
 <p>変更後のclearプロパティの値:<span id="sampleOutput"></span></p>
</div>
<div id="sampleWrap" style="width: 600px;">
 <div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
 サンプル要素1
 </div>
 <div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
 サンプル要素2
 </div>
 <div id="sample" style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
 サンプル要素3
 </div>
 <div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
 サンプル要素4
 </div>
 <div style="clear: both;"><br /></div>
</div>

CSS

<style>
#sampleWrap div {
 float: left;
}
</style>

スポンサード リンク

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