前々回では Mozillaのオブジェクトは一部を除いて互換性があることがわかりました。 今回はもう少し細かく見てプロパティに関する互換性について見てみましょう。

まず、以前の記事「W3C の DOM」で、

「Mozilla の DOM は基本的に HTML の文書構造をそのまま反映させている」

と言ったことを思い出してください。

特に問題となるようなことではないのですが、 IE や NNで今まで慣れてきた人にはちょっと注意すべき内容です。

例えば、

    <img id="pic" src="picture.gif" width=32 height=32>

という画像が( 100, 50 )の位置にある場合、レイア "div" を画像の横に配置するとき、 次のように書いてしまいます。

    pic = document.getElementById('pic');
    layer.style.left = 100 + pic.width;
    layer.style.top  =  50;

この記述は一見良さそうに見えますが、実行してもたぶん画像の横どころか、 画面上に表示さえしないでしょう。

つまり、IMG オブジェクト( HTMLImageElement )の width, height が DOMString であるために座標の演算が文字列の結合となり、 ( 10032, 50 )の位置に移動してしまうためこのような現象になります。

正しく動作するようにするためには次のようにしなければなりません。

    pic = document.getElementById('pic');
    layer.style.left = 100 + parseInt(pic.width )+'px';
    layer.style.top  =  50 + 'px';

つまり、スタイルプロパティばかりではなくタグの属性値も文字列( DOMString ) になっているのです。

styleプロパティに関しては IE5 と同様であるため、 特にプロパティの型に関して問題になるわけではありませんが、 オブジェクトの style プロパティがインラインスタイルを表すため、 スタイルシート( STYLE タグ )で指定されたり、 特に指定していないプロパティの値は styleオブジェクトからは取得できません。

IE5 であれば、 currentStyle から、適応されているスタイルを取得することができますが、 currentStyle は W3C DOM の仕様ではありません。

W3C DOM では ViewCSSオブジェクトにある getComputedStyle を使用して取得します。

例えば、以下の HTML がある場合

    <style type="text/css"><!--
    .d { position:absolute; width:100px; height:50px; }
    #d1{ left:10; top:20; }
    --></style>
    <div class="d" id="d1"></div>

レイア "d1" の left, top の値を取得するには次のようにします。

    var div  = document.getElementById('d1');
    var css  = document.defaultView.getComputedStyle(div,null);
    var left = css.getPropertyValue('left');
    var top  = css.getPropertyValue('top' );

※　現在の NN6, Mozilla0.6 では位置やサイズ情報など一部のスタイルしか 取得できないようです。 また、NN6 は getComputedStyle の動作が不安定で異常終了する場合も ありますので注意が必要です。

※　位置やサイズ情報であれば

var div = document.getElementById('d1');
var left = div.offsetLeft;
var top = div.offsetTop;

で取得できる( 但し W3C の仕様ではありません )ので必要ないかも(笑)。

プロパティの互換性に関しては、HTML や CSS の解釈や動作の違いによる差がまだありますので、 次回も引き続き従来のブラウザとの互換性について採り上げたいと思います。