ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptでページ要素の位置を正確に取得_JavaScriptスキル

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

WBOY
リリース: 2016-05-16 18:37:17
オリジナル
961 人が閲覧しました
コードをコピー コードは次のとおりです:

//要素の 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 隅の座標であるセットを返します。 JavaScriptでページ要素の位置を正確に取得_JavaScriptスキル
ただし、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 境界線のリセットなし


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート