javascript – 获取元素相对于浏览器的绝对位置

我有一个div设置为css类float,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.我需要一个适用于所有这些浏览器的解决方案.有任何想法吗？

Btw：保持跟踪javascript所做的更改是可能的,但是由于性能原因,这不是我要寻找的解决方案.另外,我没有使用jquery.

解决方法

如果可以使用项目样式元素;

<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

您可以使用顶部,左侧,宽度,高度等…