經常使用頁面尺寸與位置的獲取

最近開發中使用了一個電商放大鏡組件，遇到了這方面的問題。平常開發中，也常常會獲取一個元素的尺寸與位置，藉此機會，總結下來。

常見的尺寸與位置分類

在 web 頁面開發中，尺寸和位置大體分爲如下幾類：

• 屏幕的尺寸和位置
• 元素尺寸和位置（文檔，算是一個特殊的元素）
• 鼠標的位置

屏幕的尺寸和位置

其中屏幕的尺寸和位置是經過window.screen對象來獲取的，這裏包含咱們設備屏幕的一些信息，其中與尺寸和位置有關的以下：

screen.width // 屏幕的像素寬度
screen.height // 屏幕的像素高度
screen.availHeight // 返回瀏覽器窗口在屏幕上可佔用的垂直空間，即最大高度
screen.availWidth // 返回瀏覽器窗口可佔用的水平寬度（單位：像素）
screen.availLeft // 返回瀏覽器可用空間左邊距離屏幕（系統桌面）左邊界的距離
screen.availTop // 瀏覽器窗口在屏幕上的可佔用空間上邊距離屏幕上邊界的像素值，在 mac 上就是任務欄的高度
複製代碼

須要說明的是可佔用寬度和高度，並不是實際佔用的寬度和高度，若是你縮小的瀏覽器的窗口，這兩個值依然不會更改。對於availLeft來講，大多數狀況下，該屬性返回都是 0，若是你在有兩個屏幕的電腦上使用該屬性，在右側屏幕計算該屬性時，會返回左側屏幕的寬度。在 windows 中，該屬性取決於哪一個屏幕被設爲主屏幕，返回相對於主屏幕左邊界的 X 座標。

元素的尺寸和位置

元素的尺寸與盒子模型和 CSS有關。

element.clientWidth 
element.clientHeight
// 以上兩個屬性都是隻讀屬性，對於沒有定義 CSS 或者 內聯佈局盒子的元素爲 0，不然，他是元素內部的寬高，
// 包含 padding，但不包括滾動條、邊框和外邊框。

element.offsetWidth
element.offsetHeight

// 以上兩個屬性都是隻讀屬性，它返回該元素的像素寬高，包含該元素的垂直內邊距和邊框，且是一個整數。
// 一般，元素的offsetHeight是一種元素 CSS 寬高的衡量標準，包括元素的 border、
// padding 和元素的水平滾動條（若是存在且渲染的話），不包含:before或:after等僞類元素的高度

element.scrollWidth
element.scrollHeight
// 以上兩個只讀屬性是元素內容寬度的一種度量，包括因爲 overflow 溢出而在屏幕上不可見的內容。
// 上面的寬高等於元素在不使用滾動條的狀況下爲了適用視口中所用內容所需的最小高度。
// 在沒有滾動條的狀況下與 clientHeight 和 clientWidth 相同
複製代碼

與元素的位置相關屬性都是相對位置，以下：

// 元素的尺寸
element.offsetParent // 獲取偏移容器
element.offsetLeft; // 元素相對與偏移容器的左邊的偏移量
element.offsetTop; // 元素相對於偏移容器的頂邊的偏移量
  
element.clientLeft; // 一般狀況下是元素盒子的左邊框的寬度
eelementle.clientTop; // 一般狀況下是元素盒子的頂邊框的寬度
  
element.scrollLeft; // 橫向滾動條相對於滾動區域寬度(scrollWidth)的位置【滾動條的位置】
element.scrollTop; //縱向滾動條相對於滾動區域高度(scrollHeight)的位置【滾動條的位置】

element.scrollLeft = 30; //設置內容區域滾動到30的位置
element.scrollTop = 50; //設置內容區域滾動到50的位置
複製代碼

特殊元素——頁面尺寸與位置的獲取

特殊的元素html或者是body，均可以用來獲取頁面的尺寸與位置（使用 CSS Reset 去掉body的默認margin後，body與html重合），也包含上述的幾種屬性，只是這兩個元素的offsetParent都是null。經過設置scrollTop或者scrollWidth可讓頁面滾動到具體的位置。下面是一般用來獲取這兩個元素的方法：

document.documentElement // 獲取 html
document.body // 獲取 body

// 藉助 html 獲取 viewport 的大小，要獲取 html 的大小可使用 offsetHeight 和 offsetWidth
document.documentElement.clientWidth
document.documentElement.clientHeight
複製代碼

獲取鼠標的位置

鼠標的位置是從鼠標事件中獲取的，在事件發生的時候，event對象中有一些屬性與鼠標的位置相關。

document.documentElement.addEventListener("click", event => {
  console.log("相對於瀏覽器客戶區的位置X:",event.clientX);
  console.log("相對於瀏覽器客戶區的位置Y:",event.clientY);

  console.log("相對於頁面的位置X:",event.clientX);
  console.log("相對於頁面的位置Y:",event.clientY);

  console.log("相對於主屏幕的位置X:",event.screenX);
  console.log("相對於主屏幕的位置Y:",event.screenY);
});
複製代碼

clientX、clientY是鼠標相對於瀏覽器客戶區的位置，不包括瀏覽器的地址欄，書籤欄，底部狀態欄等瀏覽器特性，只是文檔顯示區域。永遠爲正值。

pageX、pageY是鼠標相對於文檔的位置，即相對於document的位置。pageX、pageY和clientX、clientY和body的寬度無關。若是頁面沒有滾動的話，兩者的值相等。永遠爲正值。

screenX、screenY是鼠標相對於主屏幕的位置。存在負值，這就要看擴展屏幕的設置了。

快速獲取元素的絕對位置與相對位置

說到元素的絕對與相對位置都是相對於元素的左上角來講的。絕對位置就是相對於整個 html 文檔的左上角的位置；相對位置就是相對於整個視口的左上角。

getBoundingClientRect方法返回值是一個 DOMRect 對象，這個對象描述的是與該元素相關的CSS 邊框集合。其中有left、top、right、bottom四個屬性表示相對於視口的坐上角的位置，這四個屬性就能夠直接獲取元素的相對位置。在發生滾動的時候，top和left屬性值就會隨之發生變化。所以，在不發生滾動的狀況下，他們就是便是元素的相對位置也是元素的絕對位置。

若是要計算元素的滾動元素的絕對位置，咱們只須要用該元素的相對位置加上文檔的滾動值便可。

let element = docuemnt.getElementById("my-element"); // 獲取元素
let domRect = element.getBoundingClientRect(); // 獲取 DOMRect 對象

// 獲取相對位置
let elementX = domRect.left;
let elementY = domRect.top;

// 獲取絕對位置
let X = elementX + document.documentElement.scrollLeft;
let Y = elementY + document.documentElement.scrollTop;
複製代碼

參考內容

• web前端開發中經常使用的尺寸和位置
• 用Javascript獲取頁面元素的位置