javascript 获取元素相对于浏览器的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3930391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting absolute position of an element relative to browser
提问by user396404
I have a div set to the css class float with float being:
我有一个 div 设置为 css 类浮动，浮动是：
.float {
display:block;
position:fixed;
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}
This class causes the element to stay in a fixed position on the page (the *html part is to make it work in IE). I am using javascript to shift the position of the element horizontally and vertically.
这个类使元素停留在页面上的固定位置（*html 部分是为了让它在 IE 中工作）。我正在使用 javascript 水平和垂直移动元素的位置。
I need to get the absolute position of the div relative to the browser window in javascript (how many pixels from the top and left of the browser window the div is). Right now, I am using the following:
我需要在javascript中获取div相对于浏览器窗口的绝对位置（div是浏览器窗口顶部和左侧的多少像素）。现在，我正在使用以下内容：
pos_left = document.getElementById('container').offsetLeft;
pos_top = document.getElementById('container').offsetTop;
The code above works for IE, Chrome, and FF, but in Opera it returns 0 for both. I need a solution that works for all of those browsers. Any ideas?
上面的代码适用于 IE、Chrome 和 FF，但在 Opera 中它对两者都返回 0。我需要一个适用于所有这些浏览器的解决方案。有任何想法吗？
Btw: Keeping tracking of the changes made by javascript is possible, but that is not the solution I am looking for due to performance reasons. Also, I am notusing jquery.
顺便说一句：跟踪 javascript 所做的更改是可能的，但由于性能原因，这不是我正在寻找的解决方案。另外，我没有使用 jquery。
采纳答案by ismailperim
If you can use items style element;
如果可以使用 items 样式元素；
<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;">
You can get it with element style attribute;
您可以使用元素样式属性获取它；
var top = parseInt(document.getElementById('container').style.top.split('px')[0], 10); // This row returns 20
You can use top, left, width, height etc...
您可以使用顶部、左侧、宽度、高度等...
回答by user1988451
I've had a similar question before, and looking through the blogs, the websites and this solution from stackoverflow, I've realized that a one size fits all solution is nowhere to be found! So, without further ado, here is what I've put together that gets the x,y of any element through any parent node, including iframes, scrolling divs and whatever! Here ya go:
我以前也有过类似的问题，通过博客、网站和来自 stackoverflow 的这个解决方案，我意识到无处可寻！所以，不用多说，这就是我通过任何父节点获取任何元素的 x,y 的内容，包括 iframe、滚动 div 等等！给你：
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];
}
回答by dfrishberg
A variation on user1988451's answer that I have tested cross-browser. I found their answer did not address scroll width (so I added the check for obj.scrollLeft), and behaved differently in FF and Chrome until I added the checks for thewindow.scrollY and thewindow.scrollX. Tested in Chrome, IE, Safari, Opera, FF, IE 9-10, and IE9 with 8 and 7 modes. Please note that I have not tested its behavior with iframes:
我已经跨浏览器测试了 user1988451 的答案的变体。我发现他们的答案没有解决滚动宽度（因此我添加了对 obj.scrollLeft 的检查），并且在 FF 和 Chrome 中的行为有所不同，直到我添加了对 thewindow.scrollY 和 thewindow.scrollX 的检查。在 Chrome、IE、Safari、Opera、FF、IE 9-10 和 IE9 中以 8 和 7 模式测试。请注意，我尚未使用 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];
}
回答by langpavel
I use this for PhantomJS rasterization:
我将它用于 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
};
}
回答by Fabien Ménager
You may find clues here : http://code.google.com/p/doctype/wiki/ArticlePageOffsetBut I think you'll need to add the parents' offsets to have the right value.
您可能会在这里找到线索：http: //code.google.com/p/doctype/wiki/ArticlePageOffset但我认为您需要添加父母的偏移量才能获得正确的值。
