Получение абсолютного положения элемента относительно браузера

У меня есть div, установленный для float класса css с float:

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

Этот класс заставляет элемент оставаться в фиксированной позиции на странице (часть * html должна заставить его работать в IE). Я использую javascript для перемещения позиции элемента по горизонтали и по вертикали.

Мне нужно получить абсолютную позицию div относительно окна браузера в javascript (сколько пикселей сверху и слева от окна браузера div). Сейчас я использую следующее:

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

Код выше работает для IE, Chrome и FF, но в Opera он возвращает 0 для обоих. Мне нужно решение, которое работает для всех этих браузеров. Любые идеи?

Btw: отслеживание изменений, сделанных javascript, возможно, но это не решение, которое я ищу из-за причин производительности. Кроме того, я не использую jquery.

Ответы

Ответ 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

Вы можете использовать верх, левую, ширину, высоту и т.д.

Ответ 2

У меня был аналогичный вопрос раньше, и, просматривая блоги, веб-сайты и это решение из stackoverflow, я понял, что один размер подходит для всех решений нигде не найден! Таким образом, без дальнейших церемоний, вот что я собрал, который получает x, y любого элемента через любой родительский node, включая iframe, прокручивая divs и все остальное! Здесь ya go:

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];
}

Ответ 3

Изменение на user1988451 отвечает, что я тестировал кросс-браузер. Я нашел, что их ответ не касался ширины прокрутки (поэтому я добавил чек для obj.scrollLeft) и вел себя по-разному в FF и Chrome до тех пор, пока не добавил проверки для wowow.scrollY и thewindow.scrollX. Протестировано в Chrome, IE, Safari, Opera, FF, IE 9-10 и IE9 с 8 и 7 режимами. Обратите внимание, что я не тестировал его поведение с iframes:

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];
}

Ответ 4

Здесь вы можете найти подсказки: http://code.google.com/p/doctype/wiki/ArticlePageOffset Но я думаю, вам нужно будет добавить смещения родителей, чтобы иметь правильное значение.

Ответ 5

Я использую это для растеризации 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
  };
}