ホームページ > 記事 > ウェブフロントエンド > JavaScriptでページ要素の位置を正確に取得_JavaScriptスキル
JavaScriptでページ要素の位置を正確に取得_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 18:37:17925ブラウズ
コードをコピー コードは次のとおりです:
//要素の 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 境界線のリセットなし
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。