web-dev-qa-db-ja.com

jQueryオフセット上部が正しく機能しない

マウスで要素に何かを描画するスクリプトを作成しようとしています。そのためにRaphaeljsを使用しています。

正しい描画を行うには、‍ _input‍‍_要素のtopおよびleftを見つける必要があります。 leftとtopを取得するためにvar offset = $("#input").offset();を使用しています。

しかし、topの値は正しくありません。実際のtopの距離より_10px_低い。 _10px_は異なる解像度で変更される可能性があるため、_10px_を通常は追加できないと思います問題を解決する方法を知りたいです

テストをアップロードしました ここ 。

javascriptjqueryraphaeloffset
16
ahmadali shafiee

JQuery .offset()関数には この制限 があります：

注：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" );
25
Kevin Nielsen

これとしばらく戦い、さまざまな潜在的な答えを確認した後、jQuery offset（）。top（そしておそらくそれが使用するDOM API）は一般的な使用には信頼性が高すぎると結論付けました。 HTMLレベルのマージンを除外することで文書化されているだけでなく、他のいくつかのケースでは予期しない結果を返します。

position（）。topは機能しますが、同等となるようにページを設計することは実際的でない/不可能かもしれません。

幸い、私はelement.getBoundingClientRect（）。topがビューポートに対する相対位置を完全に取得することを発見しました。次に、必要に応じて$（document）.scrollTop（）を追加して、ドキュメントの上部から位置を取得できます。

7
Leo Hendry

私は2つの異なる解決策を持っています：

1）outerHeight（true） メソッドを使用して、上記の要素の全高を計算できます。このメソッドは、マージン、パディング、ボーダーを含む高さを計算します。

そして、これは衝突を引き起こさず、真の値を返します。 これはjsFiddleの例です。

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を、本文に対して相対的に配置される要素に定義した場合、この値も使用できます。

parseInt($('#myEle').css('top'));
5
Barlas Apaydin