DOCTYPE 宣言による Property の違いについて

今回、Wordpress 用プラグイン WP-AutoPager を作成した際、色々調べ物をしたことの自分用のまとめ。
マウスカーソル位置を監視する関数を実装したのだが、ブラウザの表示領域を取得するプロパティが DOCTYPE 宣言の有無、ブラウザの違いで違ってくるよと言うお話。


<!DOCTYPE > 宣言の有無によって、ブラウザが標準または互換モードで動作するのだが、その時参照すべきプロパティがブラウザによって変わってくる。
しかも IE6 の場合は <!DOCTYPE > 宣言は必ず1行目に無いとダメ。
<?xml version="1.0″ encoding="UTF-8″?> なんて XML 宣言が先頭に書いてあると後方互換モードになってしまいます orz

スクロールバーで隠れている領域を含むサイズが取得できるプロパティ

ブラウザ 標準モード 後方互換モード
IE6 document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth
document.body.scrollHeight
FireFox 2.0 document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth
document.body.scrollHeight
Opera 9 document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth
document.body.scrollHeight
Safari 3.0.2
(for Win)
document.body.scrollWidth
document.body.scrollHeight

表示領域のサイズが取得できるプロパティ

標準モード 後方互換モード
document.documentElement.clientHeight document.body.clientHeight

実装

で、結局実装したコードが以下のような感じ

// スクロールバーで隠れている領域を含む全体の高さ
var height = (document.documentElement && document.documentElement.scrollHeight ? document.documentElement : document.body).scrollHeight;

// スクロールバーで隠れている領域を含む全体の幅
var width = (document.documentElement && document.documentElement.scrollWidth ? document.documentElement : document.body).scrollWidth;

// 表示領域の高さ
var clientHeight = (document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body ).clientHeight;

// 表示領域の幅
var clientWidth = (document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body ).clientWidth;

// 表示領域左上のY座標
var y = (document.documentElement && document.documentElement.scrollTop ? document.documentElement : document.body).scrollTop;

// 表示領域左上のX座標
var x = (document.documentElement && document.documentElement.scrollLeft ? document.documentElement : document.body).scrollLeft;

ブラウザのモード判定

ブラウザが標準モード、後方互換モードのどちらで動作しているか判定するには、document.compatMode を確認すればよいです。
コードは、こんな感じかな

if (document.compatMode && document.compatMode != "BackCompat") {
  // 標準モードで動作しているときの処理
} else {
  // 後方互換モードで動作しているときの処理
}

参考にしたサイト

DOCTYPE 宣言による Property の違いについて」への4件のフィードバック

  1. 7cc

    将来はcompatModeでどのように処理されるかわからないので、Math.min/maxを用いたほうが安全だと思います。documentElement とbody両方にアクセスすることになるので速度は落ちますが。

    返信
  2. ピンバック: piu lentoの日々 (piu lento days) » Blog Archive » XHTML 1.0 Transitionalにパスさせた

  3. をかもと 投稿作成者

    bolo さん、はじめまして。

    こちらie6互換モードですと「表示領域の高さ」が返ってきます。
    もしお手数でなければご確認いただきたいと思います。

    ご指摘ありがとうございます。
    後で、確認してみますね。

    返信
  4. bolo

    はじめまして、boloと申します。
    さっそくなのですが、

    //スクロールバーで隠れている領域を含む全体の高さ
    var height = (document.documentElement && document.documentElement.scrollHeight ? document.documentElement : document.body).scrollHeight;

    こちらie6互換モードですと「表示領域の高さ」が返ってきます。
    もしお手数でなければご確認いただきたいと思います。

    返信

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください