くれすの開発日記〔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属性に値が指定できるのです!)
そういうヒドい実装があることから、私は属性値の指定は原則プロパティへの代入で行うようにしています。

2007-05-31スタイルとの連携

[] floatが動かない 01:37  floatが動かない - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  floatが動かない - くれすの開発日記〔JavaScript編〕  floatが動かない - くれすの開発日記〔JavaScript編〕 のブックマークコメント

JavaScriptで、スタイルシートを操作することが可能。

var elem = document.getElementById("foo");
elem.style.display = "block";
elem.style.backgroundColor = "#FFCCCC";

しかし、うまく行かないものが1つ。floatである。

回り込みを指定しようとしたら、どうもブラウザによって挙動が異なったりで少々面倒らしい。

以下、UchのX40記 - [JavaScript]DOM Elementのstyle属性のfloatより。

IEやと

(DOM Element).style.styleFloat = "left";

Firefoxやと

(DOM Element).style.cssFloat = "left";

OperaやとどっちでもOK。

ひどい実装だな。。。

ここはどちらかに統一して欲しいところ。

YuichirouYuichirou2007/08/13 00:42こんにちは。floatの設定をするプロパティは、W3C勧告によれば「cssFloat」が正しいです。IEの独自実装は困ったものですね。
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties-cssFloat

CressCress2007/08/28 15:31# コメントの携帯通知が設定してなくて今頃気づきました。亀レスです。
おや、W3Cで既に勧告されているのですね。
他のCSSのように、 elem.style.float みたいに書ければ良かったんですけどね。どちらも変則的で使いにくい感じです。