Méthode d'utilisation de GetBoundingClientRect et traitement de compatibilité

Cette fois, je vais vous expliquer comment utiliser getBoundingClientRect et le traitement de compatibilité. Quelles sont les précautions sur la façon d'utiliser getBoundingClientRect et le traitement de compatibilité. Ce qui suit est un cas pratique, jetons un coup d'œil.

Le rôle de getBoundingClientRect

getBoundingClientRect est utilisé pour obtenir l'ensemble de positions d'un certain élément HTML par rapport à la fenêtre d'affichage.

L'exécution de object.getBoundingClientRect(); obtiendra les attributs top, right, bottom, left, width et height de l'élément. Ces attributs sont renvoyés sous la forme d'un object.

getBoundingClientRect()

Cette méthode renvoie un objet rectangle contenant quatre propriétés : gauche, haut, droite et bas. Représente la distance entre chaque côté de l'élément et respectivement les côtés supérieur et gauche de la page.

var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

Compatibilité des navigateurs

Il peut être pris en charge par ie5 et supérieur, mais il y a quelques points qui doivent être corrigés,

La gauche et le haut d'IE67 seront 2 pixels de moins et il n'y aura aucun attribut de largeur ou de hauteur.

Utilisez getBoundingClientRect pour écrire une méthode permettant d'obtenir l'ensemble de positions des éléments HTML par rapport à la fenêtre

<p id="test" style="width: 100px; height: 100px; background: #ddd;"></p>
<script>
 function getObjXy(obj){
  var xy = obj.getBoundingClientRect();
  var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
   bottom = xy.bottom,
   left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
   right = xy.right,
   width = xy.width||right - left, //IE67不存在width 使用right - left获得
   height = xy.height||bottom - top;
  return {
   top:top,
   right:right,
   bottom:bottom,
   left:left,
   width:width,
   height:height
  }
 }
 var test = getObjXy(document.getElementById('test'));
 alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
</script>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée de l'effet parabolique de la petite boule de vue dans le panier

Explication détaillée de l'utilisation de composants dans Vue.js

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!