JavaScriptのウィンドウ幅と高さ、マウス位置、スクロール高さ（詳細分析）_基礎知識

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。画面。availWidth

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 = width - border

clientHeight = 高さ - 境界線

offsetWidth = 幅

オフセット高さ = 高さ

(言及する必要があります: CSS の margin 属性は clientWidth、offsetWidth、clientHeight、および offsetHeight とは何の関係もありません)

－－－－－－－－－－－－－－－－－

このセクションのコードでは、主にウィンドウに関する Document オブジェクトのいくつかのプロパティを使用します。これらのプロパティの主な機能と使用方法は次のとおりです。

ウィンドウのサイズを取得するには、ブラウザごとに異なるプロパティとメソッドを使用する必要があります:

ウィンドウの実際のサイズを検出するには、Netscape の Window プロパティを使用する必要があります。

IE では、本文を検出するにはドキュメントの奥深くに移動する必要があります。

DOM 環境でウィンドウのサイズを取得したい場合は、要素ではなくルート要素のサイズに注意する必要があります。

Window オブジェクトの innerWidth プロパティには、現在のウィンドウの内側の幅が含まれます。

Window オブジェクトの innerHeight プロパティには、現在のウィンドウの内側の高さが含まれます。

Document オブジェクトの body 属性は、HTML ドキュメントのタグに対応します。

Document オブジェクトの documentElement プロパティは、HTML ドキュメントのルート ノードを表します。

document.body.clientHeight は、HTML ドキュメントが配置されているウィンドウの現在の高さを表します。

document.body.clientWidth は、HTML ドキュメントが配置されているウィンドウの現在の幅を表します。

実装コード:

コードをコピー

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

ブラウザ ウィンドウのサイズを変更します

ブラウザ ウィンドウの実際の高さ:

< ;p>ブラウザ ウィンドウの実際の幅:

ソースプログラム解釈

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

(3) 次に、関数 findDimensions () で、window.innerHeight と window.innerWidth を使用してウィンドウの高さと幅を取得し、それらを前述の 2 つの変数に保存します。

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

(5) 関数の最後に、フォーム要素に名前でアクセスすると、結果が 2 つのテキスト ボックスに出力されます。

(6) JavaScript コードの最後で、findDimensions () 関数を呼び出して操作全体を完了します。