js code d'implémentation pour obtenir l'élément relatif aux compétences position_javascript de la fenêtre

JS obtient les attributs offsetTop, offsetLeft et autres de l'élément

obj.clientWidth //Obtenir la largeur de l'élément

obj.clientHeight //La hauteur de l'élément
obj.offsetLeft //La gauche
de l'élément par rapport à l'élément parent obj.offsetTop //Le haut
de l'élément par rapport à l'élément parent obj.offsetWidth //Largeur de l'élément
obj.offsetHeight //Hauteur de l'élément

Différence :

clientWidth = remplissage de largeur
clientHeight = rembourrage en hauteur
offsetWidth = bordure de remplissage en largeur
offsetHeight = bordure de remplissage en largeur
Le décalage est supérieur à la largeur de la bordure

//获取元素的纵坐标（相对于窗口）
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

J'ai également écrit un article sur l'obtention de la position des éléments dans JS auparavant : JS obtient les attributs offsetTop, offsetLeft et d'autres attributs de l'élément. Nous pouvons obtenir la position de l'élément par rapport à la fenêtre via les attributs offsetTop et offsetLeft. , mais les attributs offsetTop et offsetLeft sont relatifs à l'élément parent est positionné, et généralement les éléments qui doivent obtenir la position ne sont pas dans la couche la plus externe, il est donc indispensable de parcourir les attributs liés au décalage de l'élément supérieur. L’efficacité devient alors un problème.

//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

Heureusement, le navigateur m'a fourni l'interface correspondante getBoundingClientRect. Cette méthode est apparue pour la première fois dans le navigateur IE, et les navigateurs ultérieurs ont également pris en charge cette méthode, et elle est plus complète, et IE ne peut obtenir que les attributs d'élément gauche, haut, bas. , et à droite, et plus tard, les navigateurs modernes peuvent également obtenir la largeur et le

de l'élément.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

Ce qu'il faut noter ici, c'est que bottom est la distance entre le bas de l'élément et le haut de la fenêtre, et non le bas de la position en CSS par rapport au bas de la fenêtre. De même, l'attribut rihgt est le. distance entre la partie la plus à droite de l'élément et le côté gauche de la fenêtre.

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

Article original, veuillez l'indiquer lors de la réimpression : Réimprimé à partir du développement front-end