14

css クラス float に設定された div があり、float は次のとおりです。

.float {
display:block; 
position:fixed; 
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}

このクラスは、要素をページ上の固定位置にとどまらせます (*html の部分は、IE で機能させるためのものです)。要素の位置を水平方向および垂直方向に移動するために JavaScript を使用しています。

javascript でブラウザ ウィンドウに対する div の絶対位置を取得する必要があります (ブラウザ ウィンドウの左上から div までのピクセル数)。現在、私は以下を使用しています：

pos_left = document.getElementById('container').offsetLeft;
pos_top = document.getElementById('container').offsetTop;

上記のコードは IE、Chrome、および FF で機能しますが、Opera では両方に対して 0 を返します。これらすべてのブラウザーで機能するソリューションが必要です。何か案は？

ところで: javascript によって行われた変更を追跡することは可能ですが、パフォーマンス上の理由から、それは私が探している解決策ではありません。また、私はjqueryを使用していません。

4

5 に答える 5

12

私は以前に同様の質問をしたことがあり、ブログ、Web サイト、およびスタックオーバーフローのこのソリューションを調べたところ、万能のソリューションがどこにも見つからないことに気付きました! したがって、これ以上苦労することなく、iframe、スクロール div などを含む、任意の親ノードを介して任意の要素の x、y を取得するものをまとめました。どうぞ:

function findPos(obj) {
    var curleft = 0;
    var curtop = 0;
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft);
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop);
    if(obj.scrollTop && obj.scrollTop > 0) curtop -= parseInt(obj.scrollTop);
    if(obj.offsetParent) {
        var pos = findPos(obj.offsetParent);
        curleft += pos[0];
        curtop += pos[1];
    } else if(obj.ownerDocument) {
        var thewindow = obj.ownerDocument.defaultView;
        if(!thewindow && obj.ownerDocument.parentWindow)
            thewindow = obj.ownerDocument.parentWindow;
        if(thewindow) {
            if(thewindow.frameElement) {
                var pos = findPos(thewindow.frameElement);
                curleft += pos[0];
                curtop += pos[1];
            }
        }
    }

    return [curleft,curtop];
}
于 2013-01-17T20:24:37.397 に答える
7

クロスブラウザーをテストした user1988451 の回答のバリエーション。彼らの答えはスクロール幅に対応していないことがわかりました（したがって、obj.scrollLeftのチェックを追加しました）。また、thewindow.scrollYとthewindow.scrollXのチェックを追加するまで、FFとChromeで動作が異なりました。Chrome、IE、Safari、Opera、FF、IE 9-10、および 8 および 7 モードの IE9 でテスト済み。iframe での動作をテストしていないことに注意してください。

function findPos(obj, foundScrollLeft, foundScrollTop) {
    var curleft = 0;
    var curtop = 0;
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft);
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop);
    if(obj.scrollTop && obj.scrollTop > 0) {
        curtop -= parseInt(obj.scrollTop);
        foundScrollTop = true;
    }
    if(obj.scrollLeft && obj.scrollLeft > 0) {
        curleft -= parseInt(obj.scrollLeft);
        foundScrollLeft = true;
    }
    if(obj.offsetParent) {
        var pos = findPos(obj.offsetParent, foundScrollLeft, foundScrollTop);
        curleft += pos[0];
        curtop += pos[1];
    } else if(obj.ownerDocument) {
        var thewindow = obj.ownerDocument.defaultView;
        if(!thewindow && obj.ownerDocument.parentWindow)
            thewindow = obj.ownerDocument.parentWindow;
        if(thewindow) {
            if (!foundScrollTop && thewindow.scrollY && thewindow.scrollY > 0) curtop -= parseInt(thewindow.scrollY);
            if (!foundScrollLeft && thewindow.scrollX && thewindow.scrollX > 0) curleft -= parseInt(thewindow.scrollX);
            if(thewindow.frameElement) {
                var pos = findPos(thewindow.frameElement);
                curleft += pos[0];
                curtop += pos[1];
            }
        }
    }

    return [curleft,curtop];
}
于 2013-09-25T20:18:37.807 に答える
1

アイテム スタイル要素を使用できる場合。

<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;">

要素のスタイル属性で取得できます。

var top = parseInt(document.getElementById('container').style.top.split('px')[0], 10); // This row returns 20

上、左、幅、高さなどを使用できます...

于 2010-10-14T05:54:31.570 に答える
1

ここで手がかりを見つけることができます: http://code.google.com/p/doctype/wiki/ArticlePageOffset しかし、正しい値を得るには、親のオフセットを追加する必要があると思います。

于 2010-10-14T06:35:57.840 に答える
1

これを PhantomJS のラスター化に使用します。

function getClipRect(obj) {
  if (typeof obj === 'string')
    obj = document.querySelector(obj);

  var curleft = 0;
  var curtop = 0;

  var findPos = function(obj) {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    if(obj.offsetParent) {
      findPos(obj.offsetParent);
    }
  }
  findPos(obj);

  return {
    top: curtop,
    left: curleft,
    width: obj.offsetWidth,
    height: obj.offsetHeight
  };
}
于 2013-08-01T10:29:47.823 に答える