目錄

• 一. 絕對位置
• 二. 相對位置

一. 絕對位置

• 網頁元素的絕對位置，指該元素的左上角相對于整張網頁左上角的坐標。無論網頁滾動條如何滾動，它都是不會變化的。

• // 獲取元素的絕對位置坐標（相對于頁面左上角）
  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}
  }
  

總結

以上是生活随笔為你收集整理的HTML之元素相对页面(视口)左上角的坐标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。