jQuery要素の座標を取得します

jqueryを使用して要素座標を取得する方法

jQueryは、要素の座標情報を取得するさまざまな方法を提供します。

1メソッド：.position()親要素を相殺する要素の座標を取得します。オフセット親要素とは、非ポジショニング方法を持つ最も近い祖先要素を指します。 static

<code class="language-javascript">var pos = $('#wrapper').position();
console.dir(pos);
// 输出：left: 0, top: 20</code>

2。

.offset()3。

<code class="language-javascript">var offset = $('#wrapper').offset();
console.dir(offset);
// 输出：left: 70, top: 40</code>

4カスタム関数：

カスタム関数をカプセル化して、コードをより簡潔で読みやすくします。 .offset()left注：top

jQueryチェーン操作を中断するため、関数は効率的ではありません。

<code class="language-javascript">var elem = $("#wrapper");
var x = elem.offset().left;
var y = elem.offset().top;
console.log('x: ' + x + ' y: ' + y);
// 输出：x: 70 y: 40</code>

jQuery座標と要素（FAQ）に関するよくある質問 getCoord()q1：jqueryを使用して、ドキュメントに対する要素の座標を取得する方法は？

<code class="language-javascript">jQuery.fn.getCoord = function() {
  var elem = $(this);
  var x = elem.offset().left;
  var y = elem.offset().top;
  console.log('x: ' + x + ' y: ' + y);
  // 输出：x: 70 y: 40
  return {
    "x": x,
    "y": y
  };
};

$('#wrapper').getCoord();
// 输出：Object { x: 70, y: 40 }</code>

メソッドを使用します。このメソッドは、ドキュメントに対する要素の垂直および水平位置を表す、それぞれプロパティとgetCoord()プロパティを含むオブジェクトを返します。

q2：jqueryのメソッドとメソッドの違いは何ですか？

.offset()topオフセットの親要素に対する要素の座標を返します。 left

<code class="language-javascript">var position = $("#element").offset();
console.log("元素位于: " + position.left + ", " + position.top);</code>

Q3：jQueryを使用して要素の座標を設定する方法は？

.position() .offset()メソッドを使用して、属性と

属性を含むオブジェクトを結合します。

.position() .offset()

Q4：jqueryを使用して要素の絶対座標を取得する方法は？

メソッドを使用して、要素の絶対座標を取得します（ドキュメントに対して）。

.offset()topQ5：jQueryを使用して、その親要素に対する要素の座標を取得する方法は？ left

<code class="language-javascript">$("#element").offset({ top: 100, left: 200 });</code>

メソッドを使用します。

以上がjQuery要素の座標を取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。