JS取得画面、ブラウザウィンドウサイズ、ページ幅(実現コード)

ページの可視領域の幅:Dcument.body.clientWidthページの可視領域の高さ:document.body.clientHeightページの可視領域の幅:document.body.offset Widthページの可視領域の高さ:document.body.offset Height(境界線の幅を含む)document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowowows.screenpです.:window.screen.widthスクリーン利用可能ワークエリアの高さ:window.screen.availHeight画面利用可能ワークエリアの幅:window.screen.avail Width
HTMLの正確な位置付け:scrollLeft、scrollwidth、clientWidth、offset Width scrollHeight:オブジェクトのスクロールの高さを取得します.scrollLeft:オブジェクトの左端とウィンドウの左端の間にある距離scrollTopを設定または取得する:オブジェクトの最上端とウィンドウに見えるコンテンツの最上端の間の距離scrollwidthを設定または取得する:オブジェクトのスクロール幅offsetHeightを取得する:レイアウトまたは親座標offsetPart属性によって指定された親座標に対するオブジェクトの高さoffset Left:レイアウトまたはoffset Part属性で指定された親座標に対するオブジェクトの計算左位置offset Top:レイアウトまたはoffset Top属性で指定された親座標に対するオブジェクトの計算先端位置event.client X相対文書の水平座標event.client.lientに対する文書の垂直座標event.offsetX相対容器の水平座標event.offsetxtコンテナの垂直座標document.documentElement.scrollTop垂直方向にスクロールする値event.client X+document.documentElement.scrollTopは、ドキュメントの水平座標+垂直方向スクロールの量に対して
IE、FireFoxの違いは以下の通りです.
IE6.0、FF 1.06+:clientWidth=width+padding clientHeight=height+padding offset Width=width+padding+border offset Height=height+padding+padding+border
IE 5.0/5.5:clientWidth=width-border clientHeight=height-border offset Width=width offset Height=height
(注意してください.CSSでのmargin属性は、clientWidth、offset Width、clientHeight、offset Heightとは無関係です.)ウェブページの可視領域幅:document.bodth.client Widthページの可視領域高:document.bodht.clinthtページの可視領域幅:document.bodthページの幅を含みます.(辺線の高さも含めて)document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowowows.screenpです.:window.screen.widthスクリーンの利用可能なワークエリアの高さ:window.screen.availHeight画面の利用可能なワークエリアの幅:window.screen.avail Width－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
技術上のポイント
このセクションのコードは主にDockmentオブジェクトのウィンドウに関するいくつかの属性を使用しています.これらの属性の主な機能と使い方は以下の通りです.
ウィンドウのサイズを得るには、異なるブラウザに対して、異なる属性と方法が必要である.ウィンドウの本当のサイズを検出するには、NetscapeでWindowの属性を使用する必要がある.IEの下でDocument内部に深く入り込んでbodyを検出する必要がある.DOM環境では、ウィンドウのサイズを得るには、要素のサイズではなく、ルート要素のサイズに注意が必要である.
Windowオブジェクトのinner Width属性は、現在のウィンドウの内部幅を含みます.Windowオブジェクトのinner Height属性は、現在のウィンドウの内部高さを含みます.
Dcumentオブジェクトのbody属性はHTMLドキュメントのラベルに対応しています.DcumentオブジェクトのdocumentElement属性はHTMLドキュメントのルートノードを表しています.
Dcument.body.clientHeightはHTMLドキュメントのあるウィンドウの現在の高さを表します.Dcument.body.clientWidthはHTMLドキュメントのあるウィンドウの現在の幅を表します.
コードを実現

 
  
br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
 
  
 
  
 
  
 
  
 
  
 
  
          
 
  
 
  
 
  
            : 
 
  
            : 
 
  
 
  
 
  <br><!-- 
  <br>var winWidth = 0; 
  <br>var winHeight = 0; 
  <br>function findDimensions() //  ：     
  <br>{ 
  <br> 
  <strong>//      <br></strong>if (window.innerWidth) 
  <br>winWidth = window.innerWidth; 
  <br>else if ((document.body) && (document.body.clientWidth)) 
  <br>winWidth = document.body.clientWidth; 
  <br> 
  <strong>//      <br></strong>if (window.innerHeight) 
  <br>winHeight = window.innerHeight; 
  <br>else if ((document.body) && (document.body.clientHeight)) 
  <br>winHeight = document.body.clientHeight; 
  <br>//    Document   body    ，       
  <br>if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) 
  <br>{ 
  <br>winHeight = document.documentElement.clientHeight; 
  <br>winWidth = document.documentElement.clientWidth; 
  <br>} 
  <br>//           
  <br>document.form1.availHeight.value= winHeight; 
  <br>document.form1.availWidth.value= winWidth; 
  <br>} 
  <br>findDimensions(); 
  <br>//    ，     
  <br>window.onresize=findDimensions; 
  <br>//--> 
  <br> 
  
 
  
 
  
 
 

ソースプログラムの解読
(1)プログラムはまず、ウィンドウの現在の幅と高さを表示するための2つのテキストボックスを含むフォームを作成し、その値はウィンドウサイズによって変化します.
(2)後続のJavaScriptコードでは、まず2つの変数windwidthとwindHeightを定義し、ウィンドウの高さ値と幅値を保存する.
(3)その後、関数findDimensions()において、window.innerHeightとwindow.innerWidthを用いてウィンドウの高さと幅を得て、両者を前述の2つの変数に保存する.
(4)Dcument内部に深く入り込んでbodyを検出し、ウィンドウサイズを取得し、前述の2つの変数に格納する.
(5)関数の最後に、名前でフォーム要素にアクセスした結果、2つのテキストボックスに出力します.
(6)JavaScriptコードの最後に、findDimensionsions()関数を呼び出して、全体の操作を完了します.