style.cssFloatプロパティ

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

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

floatプロパティは、要素の回り込みを指定し、ブロック要素を横に並べることができる。

回り込み解除には、style.clearプロパティを使う。

構文

取得

var $cssFloat = $elementReference.style.cssFloat;

戻り値

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

設定

$elementReference.style.cssFloat = "none | left | right | inherit";
none | left | right | inherit
何れかの値を指定する。初期設定値は「none」。
  • none：指定なし。
  • left：左寄せにし、続く要素を右に回り込ませる。
  • right：右寄せにし、続く要素を左に回り込ませる。
  • inherit：親要素の設定を継承。

サンプル


変更後のfloatプロパティの値：

サンプル要素１
サンプル要素２
サンプル要素３
サンプル要素４

サンプルの動作について

  • 「設定（none）」ボタンをクリックすると、横に並べない。「変更後のfloatプロパティの値：」の右横に「none」と表示する。
  • 「設定（left）」ボタンをクリックすると、左から右に向かって「サンプル要素１から４」を並べ、「変更後のfloatプロパティの値：」の右横に「left」と表示する。
  • 「設定（right）」ボタンをクリックすると、右から左に向かって「サンプル要素１から４」を並べ、「変更後のfloatプロパティの値：」の右横に「right」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setFloat( $cssFloat ) {
 var $elements = document.getElementById( "sample" ).getElementsByTagName( "div" );
 for( $i=0; $i < $elements.length; $i++ ){
  $elements[$i].style.cssFloat = $cssFloat;
 }
 var $cssFloat = $elements[0].style.cssFloat;
 document.getElementById( "sampleOutput" ).innerHTML = $cssFloat;
}
</script>

HTML

<div>
 <button onclick="setFloat('none');">設定（none）</button>
 <button onclick="setFloat('left');">設定（left）</button>
 <button onclick="setFloat('right');">設定（right）</button>
 <br />
 <p>変更後のfloatプロパティの値：<span id="sampleOutput"></span></p>
</div>
<div id="sample" 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 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>

スポンサード リンク

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