JavaScriptのページ座標に関する知識集_基礎知識

offsetTop は先頭要素または外部要素から HTML 要素の位置を取得できます。style.top も使用できます。この 2 つの違いは次のとおりです。

1. offsetTop は数値を返します。 style.top は数値を返しますが、top は数値に加えて文字列を返します。単位は px です。
2. offsetTop は読み取り専用ですが、style.top は読み取り/書き込み可能です。
3. HTML 要素にトップ スタイルが指定されていない場合、style.top は空の文字列を返します。


offsetLeft と style.left、offsetWidth と style.width、offsetHeight と style.height についても同様です。

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 での違いは次のとおりです。
IE6.0、FF1.06:
clientWidth = 幅のパディング
clientHeight = 高さのパディング
offsetWidth = 幅のパディング ボーダー
offsetHeight = 高さパディング境界線
IE5.0/5.5:
clientWidth = 幅 - 境界線
clientHeight = 高さ - 境界線
offsetWidth = 幅
offsetHeight = 高さ
(次のようにする必要があります) CSS の margin 属性は clientWidth、offsetWidth、clientHeight、offsetHeight とは関係ありません); ------
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
画面解像度の高いウィンドウ.screen.height
画面解像度の幅 window.screen.width
画面の利用可能な作業領域の高さ window.screen.availHeight
画面の利用可能な作業領域の幅 window.screen.availWidth





コードをコピー

コードは次のとおりです: //オブジェクト座標var oRect = document. "divHotImg").getBoundingClientRect();

x=oRect.left

y=oRect.top
//alert("(" x "," y ")")

if(ns4||ns6){
x = e.pageX;
y = e.pageY;