ウップス!!なかわけ

こんにちは、なかわけです。

今日もまた仕事中に困って、解決した問題の話です。

Javascriptで要素（タグ）に属性を設定したり削除したりするときに、
setAttribute()やremoveAttribute()を使用します。

以下はclass属性をセットしたいときの例です。

var element = document.getElementById("hoge");
element.setAttribute("class", "foo");

でも、これではIEではうまく動作しません。
IEの場合は、

var element = document.getElementById("hoge");
element.setAttribute("className", "foo");

と書かなくてはいけません。
これはバグではなく仕様だそうです。

var element = document.getElementById("hoge");
element.removeAttribute("onClick");

ariyasaccaさんのサイトには、IEでは仕様が違うため、
まず、setAttribute()で新しく関数を設定し、それをさらにremoveAttribute()で
削除するという方法を紹介されてました。

でも、なかわけが試してみたところIE7でうまく動きませんでした。
結局、removeAttribute()ではJavascriptを動作させる属性は削除できないみたいでした。
しょうがないので以下のような方法でやり過ごすことにしました。

setAttribute("onclick", new Function(""));

要するに、何もしない関数を設定するという方法。
これだと、クリックしても何も起きないので、
見た目上onClickは削除されたように見えます。

しかも、かなり重要なことを発見しました。
属性名を小文字で書かないとうまく動かない！！（IE7で確認）

setAttribute("onClick", new Function(""));

ではダメなのです。うまく処理されません。

setAttribute("onclick", new Function(""));

今日はこれに気づくまでに1時間かかりました。
これもIEの仕様なんでしょうね。
あ～あ、今日も勉強になった・・・。