Javascriptはブラウザのウィンドウ、画面、Webページなどの高さ、幅などを取得して決定します。

HTML の正確な位置決め属性: scrollLeft、scrollWidth、clientWidth、offsetWidth

scrollHeight: オブジェクトのスクロールの高さを取得します。
scrollLeft: オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端との間の距離を設定または取得します。
scrollTop: オブジェクトの最上端と最上端との間の距離を設定または取得しますウィンドウに表示されているコンテンツの
scrollWidth: オブジェクトのスクロール幅を取得します。
offsetHeight: レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します。
offsetLeft:レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さ 左位置の計算
offsetTop: レイアウトまたは offsetTop 属性で指定された親座標を基準とした計算されたオブジェクトの上部位置を取得します
events.clientX ドキュメントを基準とした水平座標
event.clientY ドキュメントを基準とした垂直座標
event.offsetX はコンテナを基準とした水平座標です
event.offsetY はコンテナを基準とした垂直座標ですコンテナ
document.documentElement.scrollTop は垂直スクロールの値
event.clientX document.documentElement.scrollTop はドキュメントの水平位置に相対的です 垂直方向の座標スクロール量
の違いIE と FireFox は次のとおりです。
IE6.0、FF1.06:

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

clientWidth = 幅のパディング
clientHeight = 高さのパディング
offsetWidth = 幅のパディング ボーダー
offsetHeight = 高さのパディング ボーダー
IE5.0/5.5:
clientWidth = 幅 - ボーダー
clientHeight = 高さ – 境界
offsetWidth = width
offsetHeight = height

ヒント: CSS の margin 属性は、clientWidth、offsetWidth、clientHeight、および offsetHeight とは何の関係もありません。

Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
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

技術ポイント

このセクションのコードでは、主にウィンドウに関する Document オブジェクトのいくつかのプロパティを使用します。これらのプロパティの主な機能と使用方法は次のとおりです。
ウィンドウのサイズを取得するには、ブラウザごとに異なるプロパティとメソッドを使用する必要があります。ウィンドウの実際のサイズを検出するには、IE で Netscape のウィンドウのプロパティを使用する必要があります。 DOM 環境でボディ検出を実行するためにドキュメントの奥深くでウィンドウのサイズを取得したい場合は、要素ではなくルート要素のサイズに注意を払う必要があります。
Window オブジェクトの innerWidth プロパティには、現在のウィンドウの内側の幅が含まれます。 Window オブジェクトの innerHeight プロパティには、現在のウィンドウの内側の高さが含まれます。
Document オブジェクトの body 属性は、HTML ドキュメントのタグに対応します。 Document オブジェクトの documentElement プロパティは、HTML ドキュメントのルート ノードを表します。
document.body.clientHeight は、HTML ドキュメントが配置されているウィンドウの現在の高さを表します。 document.body.clientWidth は、HTML ドキュメントが配置されているウィンドウの現在の幅を表します。

サンプルコード

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

🎜 > >ブラウザ ウィンドウの実際のサイズ -->
ブラウザ ウィンドウの実際の高さブラウザウィンドウ：ブラウザウィンドウの実際の幅：
>（）// function：cument.body.clientwidth））winwidth = document .body.clientwidth;
winHeight= document.body.clientHeight;
//Document の奥深くまで進んで本文を検出し、ウィンドウ サイズを取得します
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果は 2 つのテキスト ボックスに出力されます
document.form1.availHeight.value = winHeight;
document .form1.availWidth.value = winWidth;

findDimensions();





ソースプログラムの解釈

(1) プログラムはまず、ウィンドウの現在の幅と高さを表示する 2 つのテキスト ボックスを含むフォームを作成します。これらの値は、ウィンドウ サイズの変更に応じて変更されます。 (2) 以降の JavaScript コードでは、ウィンドウの高さと幅の値を保存するために、最初に 2 つの変数 winWidth と winHeight が定義されます。 (3) 次に、関数 findDimensions () で、window.innerHeight と window.innerWidth を使用してウィンドウの高さと幅を取得し、それらを前述の 2 つの変数に保存します。

(4) 次に、Document の奥深くまで進んで本文を検出し、ウィンドウ サイズを取得して、上記の 2 つの変数に格納します。

(5) 関数の最後にフォーム要素に名前でアクセスすると、結果が2つのテキストボックスに出力されます。
(6) JavaScript コードの最後で、findDimensions () 関数を呼び出して操作全体を完了します。