是否可以在浏览器视口中获取div的位置?不在文件中。在窗口内

时间:2008-10-17 10:49:55

标签: javascript html css

这在IE7或Firefox中是否可行?

6 个答案:

答案 0 :(得分:33)

您可以同时执行此操作 - 获取相对于文档的位置,然后减去滚动位置。

var e = document.getElementById('xxx');
var offset = {x:0,y:0};
while (e)
{
    offset.x += e.offsetLeft;
    offset.y += e.offsetTop;
    e = e.offsetParent;
}

if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
{
    offset.x -= document.documentElement.scrollLeft;
    offset.y -= document.documentElement.scrollTop;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft))
{
    offset.x -= document.body.scrollLeft;
    offset.y -= document.body.scrollTop;
}
else if (window.pageXOffset || window.pageYOffset)
{
    offset.x -= window.pageXOffset;
    offset.y -= window.pageYOffset;
}

alert(offset.x + '\n' + offset.y);

答案 1 :(得分:7)

[从我给出的答案中粘贴here]

本地getBoundingClientRect()方法现在已经存在了很长一段时间,而且正是问题所要求的。此外,它支持所有浏览器(包括IE 5,似乎!)

来自this MDN页面:

返回的值是一个TextRectangle对象,它包含描述边框的只读左,上,右和底属性(以像素为单位),左上角相对于左上角视口

你这样使用它:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

答案 2 :(得分:4)

试试the dimensions jQuery plugin。请参阅this demo

$('#myelement.').offset();

答案 3 :(得分:3)

在IE和Firefox 3中,您可以使用getBoundingClientRect进行此操作;没有必要的框架。

但是,是的,如果你需要支持其他浏览器,你应该使用框架。

答案 4 :(得分:0)

你可以从document.body.scrollTop

中减去div的offsetTop

这似乎适用于IE7和FF3,但是在一个非常简单的页面上。我没有用嵌套的DIV进行检查。

答案 5 :(得分:0)

使用Prototype它将是:

$('divname').viewportOffset.top
$('divname').viewportOffset.left