ブラウザと画面の幅と高さの情報を取得するための JS 実装アイデアとコード_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.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 = 高さ - 境界線

offsetWidth = width

offsetHeight = height

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

-------------------

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

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

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

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

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

実装コード

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

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">


;h2 align="center">