Résumé des méthodes js pour obtenir le décalage d'un élément sur les compétences page_javascript

Lorsque nous utilisons js pour créer des effets, nous avons souvent besoin d'obtenir le décalage d'un élément sur la page (comme la fonction de boîte d'invite de conseils). Pour obtenir le décalage, vous pouvez obtenir directement le décalage par rapport au document, ou vous pouvez obtenir le décalage par rapport à la fenêtre (point de vue) plus la quantité de défilement de la page (défilement).

1. Obtenez le décalage par rapport au document

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

En itérant offsetParent vers le haut, le décalage par rapport au document peut être calculé, c'est-à-dire le décalage par rapport à la page.

Problèmes avec cette méthode :

1) Pour les pages utilisant des dispositions de tableau et de cadre en ligne, en raison des différences dans la manière dont les différents navigateurs implémentent les éléments, les résultats obtenus sont inexacts.

2) Chaque fois que vous devez rechercher offsetParent un niveau à la fois, l'efficacité est trop faible.

2. Obtenez le décalage par rapport à la fenêtre (point de vue) plus le degré de défilement (défilement) de la page

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

Cette méthode obtient directement le décalage par rapport à la fenêtre d'affichage via la méthode getBoundingClientRect(), plus la quantité de défilement de la page, moins clientTop, clientLeft (les navigateurs IE8 et inférieurs utilisent (2,2) comme coordonnées du point de départ, donc vous devez soustraire la coordonnée du point de départ de la valeur. D'autres navigateurs utilisent (0,0) comme coordonnée du point de départ).

La méthode getBoundingClientRect() prend en charge IE, ff3, safari4, Orear9,5, Chrome.

3. Écriture de compatibilité

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

Pour les navigateurs qui prennent en charge la méthode getBoundingClientRect(), utilisez la méthode getOffsetRect(), et pour les navigateurs qui ne la prennent pas en charge, utilisez la méthode getOffsetSum().

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent le javascript.