JavaScriptでページ要素の位置を正確に取得_JavaScriptスキル

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

//要素の x 座標を取得します
function pageX(elem) {
return elem.offsetParent?(elem.offsetLeft pageX(elem.offsetParent)):elem.offsetLeft;
}
//要素の y 座標を取得します
function pageY(elem) {
return elem.offsetParent?(elem.offsetTop pageY(elem.offsetParent)):elem.offsetTop;
}

この巨匠がいたそうです。この本を出版するときは急いでいたため、多くの間違いがありましたが、最終的にマスターもこれら 2 つの関数に問題があることに気づき、JQuery には適用しませんでした。累積的に計算されるため、1つの要素に問題がある限り、レイヤーごとに増加する可能性があるため、スタイル属性を正確に取得する場合はこの方法を放棄します。主な計算ミスは、マスターの結論に関するものです。
配置された要素のオーバーフロー。
親要素の境界線を修正しました。 > 絶対配置要素の計算ミス


。
すべての新しいブラウザーが IE の getBoundingClientRect メソッドをサポートしているため、よりシンプル、高速、安全な方法を使用してページ要素を見つけることができます。 getBoundingClientRect は、ブラウザの視覚領域内の要素の 4 隅の座標であるセットを返します。
ただし、IE の標準モードでは奇妙な問題が発生します。HTML 要素には境界線があり、デフォルトは 2px ですが、quirks モードでは境界線がありません。詳細については、

http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx

を参照してください。 このメソッドは、クライアントの左上隅を基準とした四角形の結合の左、上、右、下の座標を公開するオブジェクトを取得します。Microsoft Internet Explorer 5 では、ウィンドウの左上は 2,2 にあります。 (ピクセル) 真のクライアント に関して。 いくつかのテストを行ってみましょう (それぞれ IE6 と IE8 で実行してください):

1. 標準モード、HTML 境界線のリセットなし

<meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=8">getBoundingClientRect<style type="text/css"> html, body{ /* border: 0; */ } </style> <title> </title>