jQuery偏移頂部不能正常工作

我想創建一個腳本在鼠標中繪製元素的東西，我使用Raphaeljs來做到這一點。jQuery偏移頂部不能正常工作

對於正確的繪圖，我需要找到input‍‍元素的top和left。我正在使用var offset = $("#input").offset();來獲得left和top。

但top值不正確。它的實際距離是10px，低於真實的top。我認爲10px也許改變不同的決議，然後我不能添加10px它通常然後我想知道我該如何解決這個問題！

我上傳了我的測試here。

來源

2012-08-23 ahmadali shafiee

您是否檢查過任何包含元素的邊距或填充？ – Archer

@Archer是的。我有，沒有'保證金'或'填充'！ –

jQuery的.offset()功能有this limitation：

注：jQuery的不支持獲取隱藏要素的偏移座標或佔邊框，邊距或填充body元素的設定。

在這種情況下的身體有一個10px的頂部邊框，這就是爲什麼你的繪畫關閉了10個像素。

推薦方案：

var offset = $("#input").offset(); 
x = x - offset.left - $(document.body).css("border-left"); 
y = y - offset.top + $(document.body).css("border-top");

來源

2012-08-23 18:18:05

非常感謝您的注意！ – user805981

就像使用offset（）屬性的附錄一樣：我得到了它似乎是錯誤的結果（我試圖使用偏移量從視口頂部查找導航列表的距離，以便使用該值作爲引導程序的「附加」附加組件中的「頂部偏移」設置）。我發現的是，抵消錯誤地計算了距離，除非所有HTML元素*上面的*列表元素（即那些確定它在頁面上的位置）明確聲明瞭高度。給他們在CSS特定的高度解決了它。 –

我有兩個不同的解決方案：

1）可以計算元素的總高度以上outerHeight(true)方法。此方法將使用邊距，填充和邊框計算高度。

而這個不會產生衝突，它會返回真值。 Here is jsFiddle example.

HTML

<div class="header"></div> 
<div class="nav"></div> 
<div class="myEle"></div>

jQuery的

var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);

2）如果定義top CSS來其相postioned在身體上的元件時，可以使用這個值也：

parseInt($('#myEle').css('top'));

來源

2012-08-23 08:44:46

我試了一下！它只是返回一個異常，說'頂部'不存在！ –

我測試了'$（「＃input」）.css（「top」）'結果是[here]（http://jsfiddle.net/3ZVHx/） –

我添加了第二種方法，很長但更堅實 –

與此戰鬥了一會兒，審查各種可能的答案後，我得出的結論是jQuery的偏移（）頂部（和它使用大概DOM API）是太不可靠。供一般使用。它不僅記錄爲排除HTML級別的邊距，而且在其他幾種情況下也會返回意外的結果。

position（）。top確實有效，但它可能不實際/可能設計頁面以使其等效。

幸運的是，我發現element.getBoundingClientRect（）。頂端完美地獲取相對於視口的位置。然後，您可以添加$（document）.scrollTop（）以根據需要從文檔頂部獲取位置。

來源

2018-01-29 15:51:11

jQuery偏移頂部不能正常工作

回答

相關問題