ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript CSS改造学習 第1章 場所を探す_基礎知識

JavaScript CSS改造学習 第1章 場所を探す_基礎知識

WBOY
WBOYオリジナル
2016-05-16 18:34:161022ブラウズ

offset
要素の offsetTop 属性と offsetLeft 属性は、すべてのブラウザで非常に役立ちます。これらは、親要素を基準とした要素の座標位置を示します。

このコードは offsetParent を検索し、offsetTop と offsetLeft を追加します。最終的には、offsetParent がどこにあるかに関係なく、画面上の要素の実際の座標が得られます。

説明
このコードは非常に単純です。まず計算する要素を渡し、次に変数 curleft と curtop を 0 に設定します。

コードをコピー コードは次のとおりです。
function findPos(obj) {
var curleft = curtop = 0;

ブラウザが offsetParent をサポートしている場合:

コードをコピーします コードは次のとおりです:
if (obj.offsetParent) {

新しいオブジェクトを見つけるたびに、その offsetTop と offsetLeft を curtop と curleft に追加します:

コードをコピー コードは次のとおりです。
do {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;

ヒント: '=' の値を返す
ここにトリックがあります:

コードをコピー コードは次のとおりです:
} while (obj = obj.offsetParent);

これは式エラーではありません。 obj と obj.offsetParent を比較するために '==' を使用したくありません (要素がその親と明らかに等しくないため、これも機能しません)。

そこで、「=」を使用して obj.offsetParent の値を obj に渡します。このテクニックの詳細な説明はここにあります。

単純に
を返します。要素に offsetParent がない場合、このループは終了します。 offsetParent が存在する場合でも、offsetLeft は curleft に追加され、offsetTop は curtop に追加されます。

ループする場合、この関数を呼び出したプログラムに座標を返します。

コードをコピー コードは次のとおりです:
return [curleft,curtop];}



翻訳アドレス: http://www.quirksmode.org/js/findpos.html

転載のために以下の情報を保管してください
著者: Beiyu (tw :@リホーク)
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。