HTML DOMスタイルのcssFloatプロパティとは？使い方とサンプルコードを解説
HTML DOM の cssFloat プロパティは、要素の水平方向の配置（フロート）を設定または取得するために使用されるプロパティです。このプロパティを使うことで、JavaScript から動的に要素を左または右に浮動させることができます。
cssFloat プロパティの構文
cssFloat プロパティを設定する際の基本的な構文は以下の通りです。
object.style.cssFloat = "left|right|none|initial|inherit";
指定できる各プロパティ値の意味は次の表のようになります。
| 値 | 説明 |
|---|---|
| none | デフォルト値。要素は浮動せず、通常の文書フローに従って表示されます。 |
| left | 要素を親要素の左端に浮動させます。後続のコンテンツはその右側に回り込みます。 |
| right | 要素を親要素の右端に浮動させます。後続のコンテンツはその左側に回り込みます。 |
| initial | このプロパティを初期値（none）に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
cssFloat プロパティの使用例
ここでは、ボタンをクリックすると div 要素のフロートが左から右に変更されるサンプルを紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 50px;
width: 50px;
margin: 5px;
float: left;
background-color: rebeccapurple;
}
div+p {
height: 70px;
color: red;
border: 2px solid #b8860b;
}
</style>
<script>
function changeFloat() {
document.getElementById("DIV1").style.cssFloat = "right";
document.getElementById("Sample").innerHTML = "div要素が右に浮動しました";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>これはサンプルの段落です。同じ段落内の2行目です。さらに3行目も続きます。</p>
<p>下のボタンをクリックすると、上のdiv要素のfloatプロパティが変更されます</p>
<button onclick="changeFloat()">Change Float</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示すると、紫色の div 要素が初期状態では左側に浮動していることが確認できます。
「Change Float」ボタンをクリックすると、JavaScript の changeFloat() 関数が実行され、div 要素が右側に浮動します。テキストの回り込みも右寄せに変化します。
まとめ
cssFloat プロパティを使えば、CSS の float プロパティと同様の効果を JavaScript から動的に適用できます。レイアウトの切り替えやインタラクティブな UI を実装したい場合に便利なので、ぜひ活用してみてください。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri