画面のさまざまな幅と高さを取得するjsメソッド（ブラウザ互換）_javascriptスキル

画面の有効な幅と高さ:

window.screen.availHeight
window.screen.availWidth

Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅Web ページ: document.body.offsetWidth (端の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の幅を含む)
の全テキスト幅Web ページ本文: document.body.scrollWidth
Web ページ本文の全文の高さ: document.body.scrollHeight
スクロールされる Web ページの高さ: document.body.scrollTop
スクロールされた Web ページの左側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 属性で指定された親座標を基準とした計算されたオブジェクトの上部位置を取得します
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 = 高さ - 境界線

オフセット幅 = 幅

オフセット高さ = 高さ

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

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

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

ウィンドウのサイズを取得するには、ブラウザごとに異なるプロパティとメソッドを使用する必要があります。ウィンドウの実際のサイズを検出するには、IE で Netscape のウィンドウのプロパティを使用する必要があります。 DOM 環境でボディ検出を実行するためにドキュメントの奥深くでウィンドウのサイズを取得したい場合は、要素ではなくルート要素のサイズに注意を払う必要があります。

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

Document オブジェクトの body 属性は、HTML ドキュメントのタグに対応します。 Document オブジェクトの documentElement プロパティは、HTML ドキュメントのルート ノードを表します。

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

ソースプログラムの解釈

(1) プログラムはまず、ウィンドウの現在の幅と高さを表示する 2 つのテキスト ボックスを含むフォームを作成します。これらの値は、ウィンドウ サイズの変更に応じて変更されます。

(2) 以降の JavaScript コードでは、ウィンドウの高さと幅の値を保存するために、最初に 2 つの変数 winWidth と winHeight が定義されます。

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

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

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

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