JSはブラウザとスクリーンの広い高等情報コードを取得します。


ページの表示領域は広いです。document.body.clientWidthページの可視領域は高いです。document.body.clientHeightページの可視領域は広いです。document.body.offset Widthページの可視領域は高いです。document.body.offset Height(境界線を含む)ウェブページの本文の全文は高いです。ページが巻かれている高さ:document.body.scrollTopページが巻かれている左:document.body.scrollLeftページの本文部分上:window.screenTopページの本文部分左:windowt.screenLeft画面の解像度の高さ:windows.screen.height画面の解像度の幅:windows.windows.windows.windowows.windows.windows.windows.windows.windows.windows.windows.windows.windowows: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の違いは以下の通りである:IE 6.0、CientWidth=width+padding clinntHeight=height+padding offsetWidth=width=width+padding+bodding+bodhht=height=height+padding+border IE 5.5/5.5:clientWidth=width=width-bodth-bodth borddedededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededeclientWidth、offset Width、clientHeight、offset Heightは関係ありません)-------------------技術の要点本節のコードは主にDcumentの対象を使っています。これらの属性の主な機能と使い方は以下の通りです。ウィンドウのサイズを得るには、ブラウザの属性と方法が必要です。ウィンドウのサイズを確認するには、Netscapeの下でWindowの属性が必要です。IEの下でDcument内部に深く入り込む必要があります。DOM環境では、ウィンドウのサイズを得るためには、要素ではなくルート要素のサイズに注意が必要です。Windowオブジェクトのinner Width属性は、現在のウィンドウの内部幅を含む。Windowオブジェクトのinner Height属性は、現在のウィンドウの内部高さを含んでいます。Dcumentオブジェクトのbody属性は、HTMLドキュメントのラベルに対応します。DcumentオブジェクトのdocumentElement属性は、HTMLドキュメントのルートノードを表します。Dcument.body.clientHeightはHTMLドキュメントがあるウィンドウの現在の高さを表します。Dcument.body.client WidthはHTMLドキュメントのあるウィンドウの現在の幅を表します。実現コード<!―――――――――――ファイル名:30.3 httm――――――――
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center"> </h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!C C>
: <input type="text" name="availHeight" size="4"><br>
: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!C
var winWidth = 0;
var winHeight = 0;
function findDimensions() // :
{
//
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// Document body ,
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
// ,
window.onresize=findDimensions;
//C>
</script>
</body>
</html>
ソースプログラム解読(1)プログラムは、まずフォームを作成し、ウィンドウの現在の幅と高さを表示するための2つのテキストボックスを含み、その値はウィンドウサイズによって変化します。2)後続のJavaScriptコードでは、まず2つの変数windwidthとwindHeightを定義し、ウィンドウの高さ値と幅値を保存する。3)そして関数findDimensions()において、window.innerHeightとwindow.innerWidthを使用してウィンドウの高さと幅を得て、両者を前述の2つの変数に保存する。4)Dcument内部に深く入り込んでbodyを検出し、ウィンドウサイズを取得し、前述の2つの変数に格納する(5)関数の最後に、名前でフォーム要素にアクセスした結果、2つのテキストボックスに出力されます。6)JavaScriptコードの最後に、findDimensions関数を呼び出して、全体の操作を完了します。