Detaillierte Erläuterung der Verwendung und Kompatibilität der Positionsmethode von jQuery-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung und Kompatibilität der Positionsmethode von jQuery

小云云

Freigeben： 2017-12-30 14:10:13

Original

1381 Leute haben es durchsucht

Dieser Artikel vermittelt hauptsächlich Wissen über die Verwendung und Kompatibilität der jQuery-Positionsmethode. Die Positionsmethode ermittelt den Offset des übereinstimmenden Elements relativ zum übergeordneten Element. Freunde, die Interesse haben, sollten einen Blick darauf werfen, ich hoffe, es kann allen helfen.

1. Positionsmethode

jquery-API-Adresse: http://jquery.cuishifeng.cn/position.html

Die Positionsmethode ermittelt den Offset des passenden Elements relativ zum übergeordneten Element.

2. Beschreibung

2.1 Der Unterschied zu offset()

.offset() besteht darin, die aktuellen Koordinaten des Elements relativ zum Dokument zu erhalten

.position( )-Methode kann die Versatzposition eines Elements relativ zu seinem übergeordneten Element ermitteln, das das nächstgelegene und positionierte Vorgängerelement des Elements ist.

2.2 Wertberechnung

Die Größe des Randes, des Randes und der Polsterung, die das Element selbst einnimmt, wird nicht gezählt.

Der Rand und der Rand des übergeordneten Elements werden nicht gezählt und der Abstand des übergeordneten Elements wird berücksichtigt.

3. Beispielcode

<!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>

Nach dem Login kopieren

4. Für Attribute wie die Zeilenhöhe von Text gelten die Standardgrößen von Browsern (Chrome, IE, Firefox) sind inkonsistent. Daher ist die Position () verschiedener Browser bei der Berechnung der Größe inkonsistent. Daher muss sichergestellt werden, dass alle Browser über eine konsistente Zeilenhöhe und andere Attribute verfügen.

Der Beispielcode ist ein Beispiel ohne Einstellung der Zeilenhöhe. Der von position() berechnete Wert ist in verschiedenen Browsern unterschiedlich.

Verwandte Empfehlungen:

<!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>

Nach dem Login kopieren

Analyse der CSS-Positionierung und Anwendungsszenarien

So verwenden Sie die CSS-Position

Detaillierte Erläuterung der Beispiele für CSS-Positionsattribute

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung und Kompatibilität der Positionsmethode von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!