js取得ページの高さ(詳細整理)

3240 ワード

ページの可視領域は広いです.Dcument.body.clientWidthページの可視領域は高いです.document.body.client Heightページの可視領域は広いです.document.body.offset Widthページの可視領域は高いです.document.body.scrollwidthページの本文の全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowows.screenpです.の幅:window.screen.widthスクリーン利用可能ワークエリアの高さ:window.screen.availHeight画面利用可能ワークエリアの幅:window.screen.avail Width
 
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(); 
 
私のローカルテストでは、IE、FireFox、Operaでは、Dcument.body.client Width document.body.client Heightを使用することができます.簡単で便利です.会社のプロジェクトの中で:Operaは依然としてdocument.body.client Width document.body.client Heightを使っていますが、IEとFireFoxはdocument.document Element.clint Width document.document.document.client Heightを使っています.
この行のマークをページに追加すると、IEでは、Dcument.body.client Width=>BODYオブジェクト幅document.body.client Height=>BODYオブジェクト高さdocument.document.clint Width=>表示領域幅document.document.documentclientHeight=>BODYオブジェクト高さdocument.documentElement.clint Width=>可視領域幅document.document.document.clientHeight=>可視領域高さ?Operaでは、Dcument.body.clientWidth=>可視領域幅document.body.clientHeight=>可視領域高さdocument.Dcument.document.client Width=>ページオブジェクト幅(つまり、BODYオブジェクト幅にMargin幅を加える)document.document Element.ccent=HedthこのIEは、Dcument.documentElement.client Width=>0 document.documentElement.client Height=>0 FireFoxは、document.document.clint Width=>ページオブジェクトの幅(つまり、BODYオブジェクトの幅にMargin幅を加えた)を表します.Operaは:document.documentElement.client Width=>ページオブジェクトの幅(すなわちBODYオブジェクトの幅にMarginの幅を加える)document.document.document.clientHeight=>ページオブジェクトの高さ(つまり、BODYオブジェクトの高さにMarginの高さを加える)が厄介です.たまにページの底を取る必要があります.document.body.clientHeightを使います.HTML標準では(この文はページ全体の高さを取ることができます.bodyの実際の内容がどれぐらい高いかに関わらず、例えば1074*768の解像度、ページが最大化された時、この高度は約720です.ページ上には「ハローworld」しかないとしても、720まで取ります.しかし、XHTMLでは、body体の中に1行しかない場合、Dcument.body.clintight.Henthtは約20行しか取れません.この時、どのようにしてページ全体の高さを取りたいですか?document.documentElement.clientHeightを使って取得します.なぜなら、HTMLでは、bodyはDOM全体のルートです.XHTMLでは、documentこそ根で、bodyはルートではないので、bodyの属性を取る時は、ページ全体の値を取ることができません.
新旧の標準を区別する行は-/W 3 C/DTV HTML 4.0 Transitional/EN"-/W 3 C/DTD XHTML 1.0 Transitionl/EN"-/"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>前者はこのページが古い基準を使用していることを示しています.後者はこのページが新しい基準を使用していることを示しています.
まとめ:XHTMLではdocument.documentElement.clientHeightで代替されます.