JSのマウスとオブジェクトの座標制御属性を詳しく分析_JavaScriptスキル

offsetTop
offsetParent プロパティで指定されたレイアウトまたは親の座標を基準にして計算されたオブジェクトの上部の位置を取得します。

offsetLeft
offsetParent プロパティで指定されたレイアウトまたは親座標を基準にして計算されたオブジェクトの左位置を取得します。

offsetHeight
レイアウトまたは親座標 offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します。
IE と Opera は、offsetHeight = clientHeight スクロール バーの境界線を考慮します。
NS と FF は、offsetHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。

offsetWidth
レイアウトまたは親座標 offsetParent プロパティで指定された親座標を基準としたオブジェクトの幅を取得します。

offsetParent
オブジェクトの offsetTop プロパティと offsetLeft プロパティを定義するコンテナ オブジェクトへの参照を取得します。

clientHeight
オブジェクトに適用される可能性のあるマージン、境界線、スクロールバー、またはパディングをカウントせずに、オブジェクトの高さを取得します。
clientHeight について異論のある人はいません。誰もが、これがコンテンツの表示領域の高さ、つまりページ ブラウザーでコンテンツが表示される領域の高さであると考えています。 、通常は最後のツールバーの下からステータスバーの上までです。この領域はページのコンテンツとは関係ありません。

clientLeft
offsetLeft プロパティとクライアント領域の実際の左側の間の距離を取得します。

clientTop
offsetTop プロパティとクライアント領域の実際の上部の間の距離を取得します。

clientWidth
オブジェクトに適用される可能性のあるマージン、境界線、スクロールバー、パディングをカウントせずに、オブジェクトの幅を取得します。

SCROLL プロパティ

scroll
スクロールをオフにするかどうかを設定または取得します。

scrollHeight
オブジェクトのスクロールの高さを取得します。

scrollLeft
オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端の間の距離を設定または取得します。

scrollTop
オブジェクトの上部とウィンドウ内の表示コンテンツの上部の間の距離を設定または取得します。

scrollWidth
オブジェクトのスクロール幅を取得します。イベント属性
x
は、親ドキュメントを基準としたマウス ポインターの位置の x ピクセル座標を設定または取得します。

screenX
ユーザーの画面を基準としたマウス ポインターの位置の X 座標を設定または取得します

offsetX
イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の x 座標を設定または取得します。

clientX
ウィンドウのクライアント領域を基準としたマウス ポインターの位置の x 座標を設定または取得します。ここで、クライアント領域にはウィンドウ独自のコントロールとスクロール バーは含まれません

ここでは、4 つのブラウザによる document.body の clientHeight、offsetHeight、scrollHeight の解釈について説明します。HTML コントロールの場合は異なります。

4 つのブラウザとは、IE (Internet Explorer)、NS (Netscape)、Opera、FF (FireFox) です。

clientHeight
clientHeight について異論のある人は誰もいません。これはコンテンツの表示領域の高さ、つまりコンテンツが存在できる領域の高さであると考えています。ページ ブラウザに表示されます。通常、最後のツールバーの下とステータス バーの上の領域は、ページのコンテンツとは何の関係もありません。

offsetHeight
IE と Opera は、offsetHeight = clientHeight スクロール バーの境界線を認識します。 NS と FF は、offsetHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。

scrollHeight
IE と Opera は、scrollHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。 NS と FF は、scrollHeight を Web ページ コンテンツの高さとみなしますが、最小値は clientHeight です。 簡単に言うと、
clientHeight は、ブラウザーを通じてコン​​テンツが表示される領域の高さです。

NS と FF は、offsetHeight とscrollHeight が両方とも Web ページ コンテンツの高さであると信じていますが、Web ページ コンテンツの高さが clientHeight 以下の場合、scrollHeight の値は clientHeight であり、offsetHeight は clientHeight より小さくなる可能性があります。
IE と Opera は、offsetHeight が表示領域 clientHeight スクロール バーと境界線であると信じています。 scrollHeight は、Web ページ コンテンツの実際の高さです。

同様に
clientWidth、offsetWidth、scrollWidth の説明は上記と同じで、高さを幅に置き換えるだけです。

しかし、
FF は異なる DOCTYPE で clientHeight の異なる解釈を持っていますが、xhtml 1 trasional では上記のように説明されていません。他のブラウザではこの問題は発生しません。

js はページの高さを取得します