IEでsetAttribute()とremoveAttribute()がうまく動かない問題

木曜日, 3月 6th, 2008

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

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

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

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

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

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

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

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

それから、次は、removeAttribute()で属性を削除する例です。
id属性がhogeのタグについているonClick属性を削除する場合です。

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

しかし、これだとまたまたIEではうまく動作しません。

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

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

setAttribute(“onclick”, new Function(“”));

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

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

setAttribute(“onClick”, new Function(“”));

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

setAttribute(“onclick“, new Function(“”));

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

Leave a Reply

*