jsでWebページの高さを取得する（詳細な配置）_JavaScriptスキル

Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅Web ページ: document.body.offsetWidth (端の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の高さを含む)
の全テキスト幅Web ページ本文: document.body.scrollWidth
Web ページ本文の全文の高さ: document.body.scrollHeight
スクロールされる Web ページの高さ: document.body.scrollTop
スクロール中の Web ページ: document.body.scrollLeft
Web ページの本体部分の上部: window.screenTop
Web ページの本体部分の左側: window.screenLeft
高い画面解像度: window.screen.height
画面解像度の幅: window.screen.width
使用可能な画面の作業領域の高さ: window.screen.availHeight
使用可能な画面の作業領域の幅: window.screen。 availWidth

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

<script>関数getInfo() <BR> { <BR>var s = ""; <BR>s = "Web ページの表示領域の幅:" document.body.clientWidth; <BR>s = "高さWeb ページの表示領域の幅:" document.body.clientHeight; <BR>s = "Web ページの表示領域の幅: " document.body.offsetWidth " (エッジとスクロール バー)"; <BR>s = "Web ページの表示領域の高さ: " document.body.offsetHeight " (エッジの幅を含む)" ; <BR>s = " Web ページの全文の幅:" document.body.scrollWidth; <BR>s = "Web ページの全文の高さ:" document.body.scrollHeight; <BR>s = "スクロールされた Web ページ (ff): " document.body.scrollTop; <BR>s = " Web ページがスクロールされる高さ (つまり): " document.documentElement.scrollTop; <BR>s = " 左側Web ページがスクロールされる部分: " document.body .scrollLeft; <BR>s = "Web ページの上部のテキスト部分:" window.screenTop; <BR>s = "Web ページのテキスト部分の左側の部分:" window.screenLeft; <BR>s = "高い画面解像度:" window.screen.height; <BR>s = "画面の解像度の幅:" window.screen.availHeight; <BR>s = "使用可能な画面の幅: " window.screen.availWidth; <BR>s = " 画面の設定は " window.screen.colorDepth " ビットカラー "; " 画面設定は " window.screen.deviceXDPI " です。 <BR>//alert (s) <BR>} <BR><BR></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 標準が問題を引き起こしていることが判明しました


このタグ行を IE のページ
に追加すると:
document.body.clientWidth ==>gt; BODY オブジェクトの幅
document.body.clientHeight ==>gt; BODY オブジェクトの高さ
document.documentElement.clientWidth ==>ドキュメント。 documentElement.clientHeight ==> 表示領域の高さ

FireFox の場合: document.body.clientWidth ==> BODY オブジェクトの幅
document.body.clientHeight ==>オブジェクトの高さ
document.documentElement.clientWidth ==> 表示領域の幅
document.documentElement.clientHeight ==> 表示領域の高さ

:
document.body.clientWidth ==> 可視領域の幅 document.body.clientHeight ==> 可視領域の高さ document.documentElement.clientWidth ==> width)
document.documentElement.clientHeight ==> ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
W3C 標準が定義されていない場合、

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

Opera は : document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅) document.documentElement.clientHeight ==>; ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
実際のところ、開発の観点から見ると、オブジェクトとメソッドが少なく、最新の標準を使用しない方がはるかに便利です。
ページの下部を取得する必要がある場合は、HTML 標準では document.body.clientHeight を使用します (本文の実際のコンテンツの高さに関係なく、この文はページ全体の高さを取得できます)。 、たとえば、1074* 解像度 768 の場合、ページを最大化すると、高さは約 720 になります。ページに「hello world」という一文しかなくても、高さは 720 になります。
ただし、 XHTML では、本文に 1 行しかない場合、 document.body.clientHeight はその行の高さ (約 20 ピクセル) しか取得できません。ページ全体の高さを取得したい場合は、 document.documentElement を使用する必要があります。 clientHeight.その理由は、HTML では body が DOM 全体のルートですが、XHTML では document がルートであり、body がルートではなくなるため、body の属性を取得するときに次のようになります。

古い標準と新しい標準の違い 行は : -//W3C//DTD” HTML 4.0 暫定版//EN" >
定版//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”>
前者はページが古い標準を使用していることを示し、後者はページが新しい標準を使用していることを示します。


概要
:



の代わりに XHTML で document.documentElement.clientHeight を使用します>コードをコピー

コードは次のとおりです:

document.body.clientHeight