Explication détaillée de l'utilisation et de la compatibilité de la méthode Position de jQuery-js tutoriel-php.cn

Explication détaillée de l'utilisation et de la compatibilité de la méthode Position de jQuery

小云云

Libérer： 2017-12-30 14:10:13

original

1468 Les gens l'ont consulté

Cet article partage principalement des connaissances sur l'utilisation et la compatibilité de la méthode jQuery Position. La méthode position obtient le décalage de l'élément correspondant par rapport à l'élément parent. Les amis intéressés devraient y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Méthode de position

Adresse de l'API jquery : http://jquery.cuishifeng.cn/position.html

La méthode de position obtient le décalage relatif de l'élément correspondant à l'élément parent.

2. Description

2.1 La différence avec offset()

.offset() est d'obtenir les coordonnées actuelles de l'élément par rapport au document

.position( ) peut obtenir la position décalée d'un élément par rapport à son élément parent, qui est l'élément ancêtre le plus proche et positionné de l'élément.

2.2 Calcul de la valeur

La taille de la bordure, de la marge et du remplissage occupés par l'élément lui-même ne sont pas comptés.

. La bordure et la marge de l'élément parent ne sont pas comptées, et le remplissage de l'élément parent est inclus.

3. Exemple de code

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

Copier après la connexion

4. Remarque

Pour les attributs tels que la hauteur de ligne du texte, les tailles par défaut des navigateurs (chrome, IE, Firefox) sont incohérents. Par conséquent, la position() des différents navigateurs sera incohérente lors du calcul de la taille, il est donc nécessaire de s'assurer que tous les navigateurs ont une hauteur de ligne et d'autres attributs cohérents.

L'exemple de code est un exemple sans définir la hauteur de ligne. La valeur calculée par position() est différente selon les navigateurs.

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

Copier après la connexion

Recommandations associées :

Analyse du positionnement CSS et des scénarios d'application

Comment utiliser la position CSS

Explication détaillée des exemples d'attributs de position CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!