くれすの開発日記〔JavaScript編〕 このページをアンテナに追加 RSSフィード

2007-11-27久々の更新

[] className 19:53  className - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  className - くれすの開発日記〔JavaScript編〕  className - くれすの開発日記〔JavaScript編〕 のブックマークコメント

更新頻度低いので、d.hatena.ne.jp に統合しちゃうかも。

var elem = document.createElement("img");

/* ↓IEで動きません。 */
elem.setAttribute("class", "foo");

/* ↓これが正しい? */
elem.className = "foo";

たまには別のブラウザで見ないとダメだね。

YuichirouYuichirou2007/11/28 01:24DOM HTMLの仕様では、各要素を表すオブジェクトはその要素の属性をプロパティとして指定できるようになっています(例:elm.title = "title属性";)。当然class属性もプロパティとして指定できるのですが、classというワードは言語によってはプロパティに使えない場合がある、というわけでclassNameというプロパティ名が採用されています。

ところで、setAttributeメソッドは上記の名前調節とは無関係に、属性名を第1引数に取ってその属性に値を設定するもののはずなのですが、IEはひどいことに
Element.prototype.setAttribute = function (name, value) { this[name] = value; }
という実装をしているようなのです。つまり第1引数に"class"をつけると、class属性に値を指定するのではなく、対応する要素オブジェクトにclassプロパティを作ってそこに値を代入してしまうのです。
(逆に考えれば、IEだけは「elem.setAttribute("className", "foo");」とするとうまくclass属性に値が指定できるのです!)
そういうヒドい実装があることから、私は属性値の指定は原則プロパティへの代入で行うようにしています。