確定使用CSS移位的背景圖像的左上角坐標

Question

我試圖通過應用一些CSS規則找到背景圖像的頂部和左側坐標已從視口移開。 很難用文字解釋，這里有一個視覺例子：

黑匣子 ：視口
紅色框 ：帶background-image <div>
藍框 ： <div>包含<a>

當我使用background-image執行<div> getBoundingClientRect時，我得到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(' ');

從下一頁可以看出，並非所有Web瀏覽器都支持此方法。

http://caniuse.com/getcomputedstyle

“ 使用Javascript的跨瀏覽器（IE8-）getComputedStyle？ ”問題尚未得到答案，我不知道這個問題的另一個解決方案。

沒有getComputedStyle（），沒有合理的方法來獲取元素的當前樣式設置，因為這需要遍歷所有包含的CSS。 它是可能的，但涉及CPU密集型代碼。 如果你去那個方向，你將能夠在現有div中創建一個臨時div，它具有相對定位，可能設置top和left，或者從背景位置設置邊距，然后計算div的clientTop和clientLeft結束的位置在某些情況下可能有效。

Answer 2

有一個css屬性： 背景位置 。 請嘗試以下代碼來檢索要求的信息：

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