float - CSSプロパティをjavascriptで操作するときの罠 [ CSS / javascript / jQuery ]

結論: CSSのfloatプロパティはブラウザによってアクセスする名前が違うので気をつけましょう

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

スタイルシートリファレンスより

ここがfloat:leftになっているdivのブロック

こっちはfloat:rightになっているdivのブロック

こんなふうにして使う。

回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。回りこまれたテキストはこんな感じになる。

…いやCSSのfloatの説明はこのとおりなんだけど、このfloatプロパティをjavascriptで設定しようとすると罠がある。大概のCSSプロパティはjavascriptで、

DOM要素.style.CSSプロパティ名 = 値;

という形式で値を参照・変更できる。「-」で区切られているプロパティ名の場合は、「-」を取って、接続する後ろのワードの一文字目を大文字にする。

例) background-color ⇒ backgroundColor

知る限りほとんどのプロパティはこれでいける。

で、全てがわかった気になって、CSSのプロパティ名だけ見てjavascriptでfloatを操作するコードを書いてハマったアホがここにいた。

floatプロパティだけは、(たぶん)以下の理由が重なって単純にオブジェクトのプロパティを参照・代入する、という事ができない。

• 単語一つで構成される名称である
• floatというワードはjavascriptの予約語である

んで、例外は例外として特別な名前をつけることで解決してあるのだが、その名前の付け方が…

IE系

styleFloat

mozilla系？

cssFloat

Opera

どっちでも可

Chrome

「float」でもOK？

とブラウザごとに違ってうっとおしい事この上ない。

いや、知っている今だからうっとおしいだけだが、知らずに「要素.style.float = xxxx」と書いて悩んだ時間を返せ。(ろくにその辺調べないでテキトウに作ったからです、ハイ)

特に「float」でもOKな奴がいるのが痛かった。思ったとおりに動いているのもあるから何がなんだか大混乱した思い出があるのですよ、floatに関しては。仕事だったら徹夜して調べてるレベルの混乱だったなあ。

生のjavascriptでブラウザ依存を吸収するのは大変、と思い知った苦い教訓でした。

これがjQueryだとCSSのプロパティ名だけ知っていれば何も意識する必要が無くてこう書けば良いのでメチャ楽である。

$(セレクタ).css("プロパティ名", "設定値")

例1) floatの場合 $(セレクタ).css("float", "left")
例2) background-colorの場合 $(セレクタ).css("background-color", "#CC00CC")

他のライブラリは使ったこと無いので知らないけど、こういうのはきっと吸収してくれているはず。