2009年9月26日土曜日

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";

 

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
  • Document Object Model Style SheetsIndex で `float’ と検索したら、確かに cssFloat となっていた。

    cssFloat of type DOMString
    See the float property definition in CSS2.