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

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

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

この記事では、主に 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>

関連する推奨事項:

CSS の位​​置決め位置とアプリケーションシナリオの例分析

CSS 位置の使用方法

CSS 位置属性の例の詳細な説明

以上がjQueryのPositionメソッドの使い方と互換性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。