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

Question

我正在尝试通过应用一些CSS规则找到背景图像的左上角坐标已从视口移开。很难用文字解释，这是一个直观的例子：

黑匣子：视口
红框：<div>，background-image 蓝框：<div>包含<a>

当getBoundingClientRect与<div> background-image进行0px 0px时，我得到<div>。这是有道理的，因为容器在视口内，并且从最顶部和左侧开始。

然而， <div>的背景图像已向左移动（并且它也可能已移至顶部），因此坐标应与来自background-image的。所以我的问题是：

我如何阅读（我不想更改）如何在任何面临这种情况的页面中找到绿点的坐标？我的意思是，浏览器必须知道切割{{1}}需要多少像素，对吧？

我目前正在使用Javascript访问Web / Dom API。我愿意使用任何东西（没有记录吗？）来实现这一目标。

Answer 1

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

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

从以下页面可以看出，并非所有网络浏览器都支持此方法。

http://caniuse.com/getcomputedstyle

“Cross-browser (IE8-) getComputedStyle with Javascript?”问题尚未得到答案，我不知道解决此问题的其他方法。

没有getComputedStyle（），没有合理的方法来获取元素的当前样式设置，因为这需要遍历所有包含的CSS。它是可能的，但涉及CPU密集型代码。如果你去那个方向，你将能够在现有div中创建一个临时div，它具有相对定位，可能设置top和left，或者从背景位置设置边距，然后计算div的clientTop和clientLeft结束的位置在某些情况下可能会起作用。

Answer 2

有一个css属性：background-position。请尝试以下代码来检索要求的信息：

$('#divId').css('backgroundPosition');