jQuery의 Position 메소드 사용 및 호환성에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery의 Position 메소드 사용 및 호환성에 대한 자세한 설명

小云云

풀어 주다： 2017-12-30 14:10:13

원래의

1444명이 탐색했습니다.

이 글에서는 주로 jQuery 위치 메소드의 사용 및 호환성에 대한 지식을 공유합니다. 위치 메소드는 상위 요소를 기준으로 일치하는 요소의 오프셋을 얻습니다. 관심 있는 친구들은 꼭 살펴보시길 바랍니다. 모두에게 도움이 되기를 바랍니다.

1. 위치 메서드

jquery API 주소: http://jquery.cuishifeng.cn/position.html

위치 메서드는 상위 요소를 기준으로 일치하는 요소의 오프셋을 가져옵니다.

2. Description

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. 참고

텍스트의 줄 높이와 같은 속성의 경우 브라우저(크롬, IE, Firefox)의 기본 크기가 일치하지 않으므로 계산 시 브라우저 위치()가 다릅니다. 크기가 일관되지 않으므로 모든 브라우저가 일관된 줄 높이 및 기타 속성을 갖도록 해야 합니다.

샘플 코드는 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>

로그인 후 복사