HTML之元素相对页面(视口)左上角的坐标

关注

原创最新推荐文章于 2026-03-29 02:45:29 发布 999 阅读 AI 写同款· GEO 优化 ›

ANPC三电平拓扑：两种调制方式解析 ANPC结构是基于“I”型NPC结构（下面讲NPC如不特殊说明，均指的是“I”型结构NPC）发展出来的一种改进型。我们在讲NPC结构的时候会谈到他的一个缺点就是损耗分布不均匀，会导致温升不均衡，进而限制模块的功率输出能力。而ANPC结构由于多了两个开关管以及相应的两个中性点换流回路（如下图），可以更加灵活任意的配置开关管可以使损耗没有那么的不均衡，从而能一定程度上提高模块的输出功率。ANPC拓扑结构图以及增加的环流回路。阅读详情

一. 绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。无论网页滚动条如何滚动，它都是不会变化的。

// 获取元素的绝对位置坐标（相对于页面左上角）
function getElementPagePosition(element){
  //计算x坐标
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null){
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
  }
  //计算y坐标
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null){
    actualTop += (current.offsetTop+current.clientTop);
    current = current.offsetParent;
  }
  //返回结果
  return {x: actualLeft, y: actualTop}
}

使用例子:

var rect = getElementPagePosition(element);
// 输出坐标
console.log("元素的左上角相对于视口的坐标：", rect.x, rect.y);
//滚动到该元素 (滚动到使该元素位置 x y 贴紧视口左上角)
window.scrollTo({
 left: rect.x,
 top: rect.y,
 behavior:"smooth"
 });

二. 相对位置

网页元素的相对位置，是指元素左上角相对于浏览器窗口可视区域（视区：viewport）左上角的坐标。它会随着滚动条滚动而变化。

// 获取元素的绝对位置坐标（像对于浏览器视区左上角）
function getElementViewPosition(element){
  //计算x坐标
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null){
    actualLeft +=  (current.offsetLeft+current.clientLeft);
    current = current.offsetParent;
  }
  if (document.compatMode == "BackCompat"){
    var elementScrollLeft=document.body.scrollLeft;
  } else {
    var elementScrollLeft=document.documentElement.scrollLeft;
  }
  var left = actualLeft - elementScrollLeft;
  //计算y坐标
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null){
    actualTop += (current.offsetTop+current.clientTop);
    current = current.offsetParent;
  }
  if (document.compatMode == "BackCompat"){
    var elementScrollTop=document.body.scrollTop;
  } else {
    var elementScrollTop=document.documentElement.scrollTop;
  }
  var right = actualTop-elementScrollTop;
  //返回结果
  return {x: left, y: right}
}

收录于