JavaScript で CSS の float 属性を設定する

1. DOM Element を右に寄せたい

DOM Element を生成し、右に寄せたい。

そのために、element.style.float を設定したが、要素を右に寄せることができなかった。 (+_+)

var newElem = document.createElement("div");
var p = document.body.firstChild;    // この要素の前に newElem を挿入 
newElem.innerHTML = "挿入";
p.parentNode.insertBefore(newElem, p);

newElem.style.float = "right";

• cf. JavaScript で特定の要素の前に要素を挿入する

 

2. float ではなく cssFloat 属性を設定する

右寄せをするには、element.sytle.cssFloat 属性を利用する。

UchのX40記: [JavaScript]DOM Elementのstyle属性のfloat (via floatが動かない - くれすの開発日記〔JavaScript編〕 - g:javascript) によると、

IEやと

(DOM Element).style.styleFloat = "left";

Firefoxやと

(DOM Element).style.cssFloat = "left";

OperaやとどっちでもOK。

先ほどの右寄せを設定しているコードを、以下のように変更。

newElem.style.cssFloat = "right";

なぜ Float の前に css と接頭辞があるのだろう？

 

3. DOM の仕様

DOM の仕様を確認してみる。

Document Object Model – Wikipedia によると、

Document Object Model (DOM) Level 2 Style Specification

• スタイルシート（CSS及びCSS Level2）に関する拡張

Document Object Model Style Sheets の Index で `float’ と検索したら、確かに cssFloat となっていた。

cssFloat of type DOMString

See the float property definition in CSS2.