javascript_javascript スキルを使用して Web ページの幅と高さを取得する方法のまとめ

document.body.clientWidth - Web ページの表示領域の幅
document.body.clientHeight - Web ページの表示領域の高さ

document.body.offsetWidth - 端とスクロール バーの幅を含む、Web ページの表示領域の幅
document.body.offsetHeight - Web ページの表示領域の高さ (端とスクロール バーの高さを含む) [FF、chrom はページ全体の高さ、IE opera は通常]

document.body.scrollWidth - Web ページの合計幅
document.body.scrollHeight - Web ページの合計の高さ

document.body.scrollTop - スクロールバーがある場合、スクロールバーを下にドラッグし、表示されていない部分の高さを上にドラッグします
document.body.scrollLeft - 上記と同じ

window.innerHeight - ブラウザウィンドウの内側の高さ

window.innerWidth - ブラウザウィンドウの内側の幅

window.screenTop - Web ドキュメントの上部と Web ページのテキスト部分の画面の上部の間の距離ですが、FF では動作が異なるため、一緒に使用します。注意】
window.screenLeft - Web ページのテキストの左側 [Web ページ ドキュメントの左端と画面の左端の間の距離。ただし、FF では動作が異なるため、Chrom、IE、Opera を使用します。注意してください]

window.screen.height - 画面解像度の高さ
window.screen.width - 画面解像度の幅

window.screen.availHeight - 利用可能な作業領域の高さ [画面全体、ただし下部のタスクバーは含まない]
window.screen.availWidth - 利用可能な作業領域の幅 [画面全体の幅]

window.screen.clorDepth - 画面の色、一般的に使用される 16、32 ビットなど
window.screen.deviceXDPI - 画面ピクセル/インチ [IE ではサポートされていますが、他ではサポートされていません]

ページの幅と高さを取得する JavaScript メソッド

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽："+ document.body.clientWidth;
  s += " 网页可见区域高："+ document.body.clientHeight;
  s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽："+ document.body.scrollWidth;
  s += " 网页正文全文高："+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
  s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 网页被卷去的左："+ document.body.scrollLeft;
  s += " 网页正文部分上："+ window.screenTop;
  s += " 网页正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的宽："+ window.screen.width;
  s += " 屏幕可用工作区高度："+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

私のローカルテストでは:
IE、FireFox、Operaで使用可能

document.body.clientWidth
document.body.clientHeight

今すぐ入手できます。とても簡単で便利です。
社内プロジェクト間では:
Opera はまだ
を使用しています

document.body.clientWidth
document.body.clientHeight

ただし、IE と FireFox は
を使用します

document.documentElement.clientWidth
document.documentElement.clientHeight

問題の原因は W3C の標準であることが判明

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
このタグ行をページ

に追加すると、

IE の場合:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Firefox の場合:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

オペラの場合:

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

W3C 標準が定義されていない場合は、

IE は:

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox は:

コードをコピー コードは次のとおりです。

document.documentElement.clientWidth ==> 、BODY オブジェクトの幅 + 上マージンの幅)
document.documentElement.clientHeight ==> ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)

オペラは次のとおりです:

コードをコピー コードは次のとおりです。

document.documentElement.clientWidth ==> ページ オブジェクトの幅(つまり、BODY オブジェクトの幅とマージンの幅を足したもの)
document.documentElement.clientHeight ==> ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。