JavaScript は Web ページ、ブラウザ、画面の高さ、幅の概要を取得します_JavaScript のヒント

JavaScript を書くときに、レイアウトの位置の問題を解決するために Web ページ、ブラウザー、画面の高さと幅を使用する必要があることがよくありますが、以前使用した後は忘れてしまったり、検索してしまうことがよくあります。インターネット上にあるので、自分で要約するだけなので、再利用も簡単になり、時間と労力を節約できます。

Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅: document.body.offsetWidth (端の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の幅を含む)
Web ページ本文の全テキスト幅: document.body.scrollWidth (スクロール バーを含む幅)
Web ページ本文の全文の高さ: document.body.scrollHeight (スクロール バーを含む高さ)
ページが非常に高くスクロールされました: 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

HTML の正確な位置指定:scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollHeight: オブジェクトのスクロールの高さを取得します。
scrollLeft: オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端との間の距離を設定または取得します
scrollTop: オブジェクトの上部とウィンドウ内の表示コンテンツの上部の間の距離を設定または取得します
scrollWidth: オブジェクトのスクロール幅を取得します
offsetHeight: レイアウト、または親座標 offsetParent プロパティ
で指定された親座標を基準としたオブジェクトの高さを取得します。 offsetLeft: offsetParent プロパティ
で指定されたレイアウトまたは親座標を基準にして計算されたオブジェクトの左位置を取得します。 offsetTop: offsetTop 属性
で指定されたレイアウトまたは親座標を基準にして計算されたオブジェクトの上部位置を取得します。 event.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 = 幅
offsetHeight = 高さ

要約: 高さと幅については、詳細がわからないことが多く、一部の値は同じなので、非常に混乱します。状況によります。