Archive for 3月, 2008

このページの目次

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の仕様なんでしょうね。
あ~あ、今日も勉強になった・・・。

JavaScriptのカレンダーライブラリ「Yahho Calendar」

水曜日, 3月 5th, 2008

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

今日も仕事でJavaScriptをがんばってみました。
実際そんなにがんばるところはなかったですが。

まず、以下のことがしたかったです。

テキストフィールドをクリックしたときに、
カレンダーがポンッとポップアップで表示されて
(ポップアップウィンドウではなくレイヤーとして表示されて)、
そのカレンダーの日付をクリックすると
その日付がテキストフィールドに自動的に入力されてる。

でも、まあやりたいことそのままのライブラリなんてないだろうから
複数のライブラリを組み合わせて作るかな、と思ってたら
ほぼそのままのライブラリがありました。

Yahho Calendarというそうです。
(はじめスペルミスかと思ったw)
米Yahoo!のYUI(Yahoo! User Interface Library)を利用している
ところからこの名がついたそうな。

使い方も作者のページに親切に書いてあります。
参考にさせてもらいました。ありがとうございました

YUIカレンダーを日本語化&ポップアップ対応&祝日も表示 – Yahho Calendar
ゼロと無限の間に:Sandbox