Uzyskiwanie bezwzględną pozycję elementu w stosunku do przeglądarki

Question

Mam div zestaw do klasy css pływaka z pływakiem samopoczucie:

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

Klasa ta powoduje element do pozostania w stałym położeniu na stronie (* część html ma sprawić, żeby działało w IE). Używam javascript do przesunięcia pozycji elementu w poziomie i w pionie.

Potrzebuję uzyskać bezwzględną pozycję elementu div względem okna przeglądarki w javascript (ile pikseli od górnej i lewej strony okna przeglądarki to div). Teraz używam następujące:

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

Powyższy kod działa dla IE, Chrome i FF, ale w Operze zwraca 0 dla obu stron. Potrzebuję rozwiązania, które działa dla wszystkich tych przeglądarek. Jakieś pomysły?

Przy okazji: Śledzenie zmian wprowadzonych przez javascript jest możliwe, ale nie jest to rozwiązanie, którego szukam ze względu na wydajność. Również jestem nie przy użyciu jquery.

Answer 1

Jeśli możesz użyć elementu style element;

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

Można uzyskać z atrybutem stylu elementu;

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

Można użyć górny, lewy, szerokość, wysokość itp ...

Answer 2

można znaleźć wskazówki tutaj: http://code.google.com/p/doctype/wiki/ArticlePageOffset ale myślę, że trzeba dodać offsetu z rodzicami mieć odpowiednią wartość.

Answer 3

Już wcześniej miałem podobne pytanie i przeglądając blogi, strony internetowe i to rozwiązanie ze stackoverflow, zdałem sobie sprawę, że nie ma takiego rozwiązania, które pasowałoby do wszystkich rozmiarów! Tak więc, bez dalszych ceregieli, tutaj jest to, co stworzyłem, które dostaje x, y dowolnego elementu przez dowolny węzeł nadrzędny, w tym iframe, przewijanie div i cokolwiek! Tu 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]; 
} 

Answer 4

Używam tego dla PhantomJS rasteryzacji:

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

Answer 5

wariacja na odpowiedź user1988451 że ja testowałem cross-browser. Zauważyłem, że ich odpowiedź nie dotyczyła szerokości przewijania (więc dodałem opcję obj.scrollLeft) i zachowywałem się inaczej w FF i Chrome, dopóki nie dodałem sprawdzeń dla thewindow.scrollY i thewindow.scrollX. Testowany w Chrome, IE, Safari, Opera, FF, IE 9-10 i IE9 z 8 i 7 trybami. Należy pamiętać, że nie testowałem jego zachowanie z 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]; 
}