确定使用CSS移位的背景图像的左上角坐标

Question

我试图通过应用一些CSS规则找到背景图像的顶部和左侧坐标已从视口移开.很难用文字解释,这是一个视觉例子:

黑匣子:视口红
框:<div>带background-image
蓝框:<div>包含一个<a>

当我做getBoundingClientRect的<div>用background-image,我得到0px 0px.这是有道理的,因为容器在视口内,并且从最顶部和左侧开始.

然而,它的背景图像<div>已经向左移动了(它也可能已经移到了顶部),因此坐标应该与坐标不同<div>.所以我的问题是:

我将如何阅读(我不想更改)如何在任何面临这种情况的页面中找到绿点的坐标？我的意思是,浏览器必须知道需要切割多少像素background-image,对吧？

我目前正在使用Javascript访问Web/Dom API.我愿意使用任何东西(没有文件记载？)来实现这一目标.

Answer 1

这是适用于现代浏览器的问题解决方案。

var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');

正如您从下页中看到的那样，并非所有网络浏览器都支持此方法。

http://caniuse.com/getcompulatedstyle

“使用 Javascript 的跨浏览器（IE8-）getCompulatedStyle？ ”问题还没有答案，我不知道这个问题的另一个解决方案。

如果没有 getComputedStyle() ，就没有合理的方法来获取元素的当前样式设置，因为这需要遍历所有包含的 CSS。这是可能的，但涉及 CPU 密集型代码。如果您要朝这个方向走，您将能够在现有 div 内创建一个具有相对定位的临时 div，可能将顶部和左侧或边距设置为背景位置的值，然后计算 div 的 clientTop 和 clientLeft 结束位置up 这在某些情况下可能有效。