jsでブラウザの基本情報を取得_基礎知識

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.scroll 垂直スクロールの先頭の値
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 ドキュメントが配置されているウィンドウの現在の幅を表します。

さまざまなブラウザの表示ウィンドウ サイズを取得する方法について少し調べてみました。

私のローカルテストでは: IE、FireFox、Opera で使用できました

document.body.clientWidth

Document.body.clientHeight を取得することができ、非常に簡単で便利です。

そして会社のプロジェクトでは: Opera は今でも

を使用しています

document.body.clientWidth

document.body.clientHeight

ただし、IE と FireFox は

を使用します

document.documentElement.clientWidth

document.documentElement.clientHeight

W3C 標準が問題を引き起こしていることが判明http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

この行のタグをページに追加すると

IE: document.body.clientWidth ==> BODY オブジェクトの幅

document.body.clientHeight ==> BODY オブジェクトの高さ

document.documentElement.clientWidth ==> 表示領域の幅

document.documentElement.clientHeight ==> 表示領域の高さ

FireFox の場合: document.body.clientWidth ==> BODY オブジェクトの幅

document.body.clientHeight ==> BODY オブジェクトの高さ

document.documentElement.clientWidth ==> 表示領域の幅

document.documentElement.clientHeight ==> 可視領域の高さ?

Opera の場合: document.body.clientWidth ==> 表示領域の幅

document.body.clientHeight ==> 可視領域の高さ

document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅) document.documentElement.clientHeight ==>gt; ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)

W3C 標準が定義されていない場合は、

IE は次のようになります: document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox は次のとおりです: document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を足したもの)

document.documentElement.clientHeight ==> ページオブジェクトの高さ (すなわち、BODY オブジェクトの高さとマージンの高さ)

オペラは次のとおりです: document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を足したもの)

document.documentElement.clientHeight ==> ページオブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)

実際、フロントエンドの設計と開発の観点からすると、オブジェクトとメソッドが少なく、最新の標準を使用しない方がはるかに便利です。しかし、トレンドについていけなければ上級デザイナーにはなれないので、私たちはこの知識を理解して習得する必要があります。