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プロパティの値：
サンプル要素１
サンプル要素２
サンプル要素３
サンプル要素４
サンプルの動作について
- 「設定（none）」ボタンをクリックすると、回り込みを解除しない。「変更後のclearプロパティの値：」の右横に「none」と表示する。
- 「設定（left）」ボタンをクリックすると、「サンプル要素３」の左寄せ右回り込みを解除する。「変更後のclearプロパティの値：」の右横に「left」と表示する。
- 「設定（right）」ボタンをクリックすると、右寄せ左回り込みを解除しようとするが、「サンプル要素３」の左寄せ右回り込みは解除できない。「変更後のclearプロパティの値：」の右横に「right」と表示する。
- 「設定（both）」ボタンをクリックすると、左寄せ右回り込みも右寄せ左回り込みも両方解除するので、「サンプル要素３」の左寄せ右回り込みを解除する。「変更後の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>
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;">
サンプル要素１
</div>
<div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
サンプル要素２
</div>
<div id="sample" style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
サンプル要素３
</div>
<div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
サンプル要素４
</div>
<div style="clear: both;"><br /></div>
</div>
<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;">
サンプル要素１
</div>
<div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
サンプル要素２
</div>
<div id="sample" style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
サンプル要素３
</div>
<div style="border: 1px solid blue; background-color: pink; width: 148px; height: 98px;">
サンプル要素４
</div>
<div style="clear: both;"><br /></div>
</div>
CSS
<style>
#sampleWrap div {
float: left;
}
</style>
#sampleWrap div {
float: left;
}
</style>