ホームページ > 記事 > ウェブフロントエンド > jQueryのPositionメソッドの使い方と互換性について詳しく解説

jQueryのPositionメソッドの使い方と互換性について詳しく解説

小云云オリジナル: 2017-12-30 14:10:131415ブラウズ

この記事では、主に jQuery Position メソッドの使用法と互換性に関する知識を共有します。position メソッドは、親要素を基準とした一致する要素のオフセットを取得します。興味のある友人はぜひ見てください。皆さんのお役に立てれば幸いです。

1. Position メソッド

jquery API アドレス: http://jquery.cuishifeng.cn/position.html

position メソッドは、親要素に対する一致する要素のオフセットを取得します。

2. 説明

2.1 offset()

.offset() の違いは、ドキュメントを基準とした要素の現在の座標を取得することです

.position() メソッドは、ドキュメントを基準とした要素のオフセット位置を取得できます親要素、親要素要素の最も近い位置にある祖先。

2.2 値の計算

要素自体が占めるボーダー、マージン、パディングのサイズはカウントされません。

。親要素のボーダーとマージンはカウントされず、親要素のパディングも含まれます。

3. サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery position()示例</title>
    <style>
      html {
        line-height: 1.15;
      }
      /*父元素--相对定位*/
      .parent {
        position: relative;
        width: 200px;
        height: 400px;
        /*父元素的margin不计算在内*/
        margin-top: 10px;
        /*父元素的border不计算在内*/
        border: 1px solid green;
        /*父元素的padding计算在内*/
        padding-top: 10px;
      }
      .child-1 {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #2E8DED;
      }
      .child-2 {
        width: 100px;
        height: 100px;
        /*子元素的margin不计算在内*/
        margin: 10px auto 0;
        /*子元素的border不计算在内*/
        border: 1px solid #2E8DED;
        /*子元素的padding不计算在内*/
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p class="parent">
      <p class="child-1">
        first child
      </p>
      <p class="child-2" id="no-2">
        second child
      </p>
    </p>
    <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //获取child-2子元素距离父元素的距离
        console.log($('#no-2').position().top);
      });
    </script>
  </body>
</html>

4. 注

テキストの行の高さなどの属性については、ブラウザー (Chrome、IE、Firefox) のデフォルトのサイズが異なるため、計算時に異なるブラウザーのposition()が存在します。サイズは一貫していないため、すべてのブラウザで行の高さとその他の属性が一貫していることを確認する必要があります。

サンプルコードはline-heightを設定しない例です。position()の計算値はブラウザによって異なります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery position()示例</title>
    <style>
      html {
        /*必须给予一致的设置,否则position()计算值不同*/
        /*line-height: 1.15;*/
      }
      /*父元素--相对定位*/
      .parent {
        position: relative;
        width: 200px;
        height: 400px;
        /*父元素的margin不计算在内*/
        margin-top: 10px;
        /*父元素的border不计算在内*/
        border: 1px solid green;
        /*父元素的padding计算在内*/
        padding-top: 10px;
      }
      .child-1 {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #2E8DED;
      }
      .child-2 {
        width: 100px;
        height: 100px;
        /*子元素的margin不计算在内*/
        margin: 10px auto 0;
        /*子元素的border不计算在内*/
        border: 1px solid #2E8DED;
        /*子元素的padding不计算在内*/
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p class="parent">
      文字文字
      <p class="child-1">
        first child
      </p>
      <p class="child-2" id="no-2">
        second child
      </p>
    </p>
    <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //获取child-2子元素距离父元素的距离
        console.log($('#no-2').position().top);
      });
    </script>
  </body>
</html>

jQueryのPositionメソッドの使い方と互換性について詳しく解説

関連記事