Javascript 确定使用CSS移动的背景图像的左上角坐标
我试图找到背景图像的顶部和左侧坐标,通过应用一些CSS规则,该图像已从视口中移出。难以用语言解释,以下是一个直观的例子: 黑框:视口Javascript 确定使用CSS移动的背景图像的左上角坐标,javascript,html,css,dom,Javascript,Html,Css,Dom,我试图找到背景图像的顶部和左侧坐标,通过应用一些CSS规则,该图像已从视口中移出。难以用语言解释,以下是一个直观的例子: 黑框:视口 红色框:带有背景图像 蓝色框:包含 当我使用背景图像对执行的获取绑定clientrect时,我得到0px 0px。这很有意义,因为容器位于视口中,并且从最顶部和最左侧开始 但是,该的背景图像已向左移动了(它也可能已移动到顶部),因此坐标应与的坐标不同。所以我的问题是: 如何阅读(我不想更改)如何在任何面临这种情况的页面中找到绿点的坐标?我的意思是,浏览器必须知道
红色框:
带有背景图像
蓝色框:
包含
当我使用
背景图像对
执行的获取绑定clientrect
时,我得到0px 0px
。这很有意义,因为容器位于视口中,并且从最顶部和最左侧开始
但是,该
的背景图像已向左移动了(它也可能已移动到顶部),因此坐标应与
的坐标不同。所以我的问题是:
如何阅读(我不想更改)如何在任何面临这种情况的页面中找到绿点的坐标?我的意思是,浏览器必须知道剪切背景图像需要多少像素,对吗
我目前正在使用Javascript访问Web/Dom API。我愿意使用任何东西(可能是未记录的?)来实现这一点 它有一个css属性:the。请尝试使用以下代码检索请求的信息:
$('#divId').css('backgroundPosition');
这是一个在现代浏览器上解决问题的方法
var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');
从下面的页面可以看到,并非所有的web浏览器都支持此方法
“”问题还没有答案,我也不知道这个问题的另一个解决方案
如果没有getComputedStyle(),就无法合理地获取元素的当前样式设置,因为这需要遍历所有包含的CSS。这是可能的,但涉及CPU密集型代码。如果您要朝这个方向走,您将能够在现有div内创建一个临时div,并具有相对定位,可能会设置顶部和左侧,或边距,从背景位置计算值,然后计算div的clientTop和clientLeft的结束位置,这在某些情况下可能会起作用。您是否尝试过计算图像的宽度,从窗口的宽度中减去,然后除以2?如果它始终居中,则应得到每侧窗口外的数量。如果图像是右对齐的,只需减去两个宽度即可。@brouxhaha感谢您的评论。这只是一个例子,我试图找到一个普遍的解决办法。如果背景图像不是中心,而是其他东西呢?这是个好问题。我看到的另一个问题是,如何访问背景图像,或者如果它不是背景图像而是内联图像怎么办?如果周围的div正在缩小,导致图像缩小,该怎么办?如果图像突破了包含div的边界怎么办?如果大于包含的div,但设置了overflow:hidden,该怎么办?有大量的变量需要考虑。@brouxhaha感谢您花时间发表评论。您提到的所有这些可能性并不意味着浏览器实际上需要找出坐标才能渲染元素。我只是想知道怎样才能得到这些坐标。不管怎样,如果我发现更多的问题,我会在问题出现时解决。如果你认为我可以用这个属性解决我的问题,请定义你将如何找到一个普遍的解决方案。