IE6のjavascript Tips

なんか、日付の指定を間違えたのか、今日の昼書いたのが明日のエントリになってて、
未来日記になってしまった。

と、それは置いといて、今回はかなり濃ゆい内容。
javascriptをガシガシつかって、それなりのものを作ったんだけど、
Firefoxで確認しながら作ったものが、IE6で正常に動かないことはままある。

どうやら、IE6はcssどころか、javascriptも腐ってるようだ。

そんなことを言っても、IE6に対応させないことにはどうしようもないので、
なんとか、クロスブラウザ対応をした。

まず、IEでつまづくのは、
スタイルの変更だろうと思う。
注意しなければならないのが、clsss属性とstyleのfloat。
Firefox他だと、
a.class = "hoge";
a.style.cssFloat = "left";

と書く所をIEだと、
a.className = "hoge";
a.style.styleFloat = "left";
と書かないといけない。　これは知らないとハマるので、覚えておきたい。

そんで、次。
IE6では、innerHTMLを極力使わない方がいい。
どの場面ではOKでどの場面ではダメかはよく分からないが、
DOMと併用すると、ひどい目にあう。
全てDOM操作でやった方が吉だろう。

あと、DOM操作でidが被るようなことはやらないこと。たぶんまずい。

あと、こんなことはする方が少ないと思うが、
<div id="a" style="float:left;"></div>
というのがあったとして、
floatを無効にしたい場合、
var a = document.getElementById("a");
a.style.cssFloat = null;
とすると、Firefoxではうまいこと無効になってくれる。

しかし、IEでは、styleFloatを使用したところでこれは無効にならない。

これは、別にDOMを使ってdivを生成することでなんとか解決させた。IDも被らないように巧み？に操作。
var id = a.id;
a.id = "temp"; //適当に名前つける。
var newA = document.createElement("div");
newA.id = id;
・・・
//このあと、innerHTMLを使わずに、DOM操作で作業を完了させること。

javascript奥が深い。