背景：最近在商品列表項目迭代中，需要在商品列表底部增加一個分銷商品廣告位，另外接收到一個產品曝光度的埋點需求，需要知道產品出現在用戶視口后在進行數據統計！

基于虛擬 DOM 數據驅動的思想，最不提倡的就是 jquery 時代的 DOM 操作！但是在目前一些復雜的頁面中經常還是會用 javascript 處理一些 DOM 元素，實現一些動態效果；最常見的是用到一些元素的位置和尺寸的計算，但是其中瀏覽器的兼容性問題也是不可忽略的一部分，要想寫出預想效果的JavaScript代碼，我們需要了解一些基本知識。

基本概念

網頁大小：一張網頁的全部面積，就是它的大小。通常情況下，網頁的大小由內容和 CSS 樣式表決定。

瀏覽窗口大小：指的是在瀏覽器窗口中看到的那部分網頁面積，又叫做 viewport (視口)。

如果網頁的內容能夠在瀏覽器中全部顯示(也就不出現滾動條)，那么網頁的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動瀏覽器窗口，可以顯示出網頁的各個部分。

基本元素屬性

在每個HTML元素都有下列屬性。

offsetWidth

clientWidth

scrollWidth

offsetHeight

clientHeight

scrollHeight

offsetLeft

clientLeft

scrollLeft

offsetTop

clientTop

scrollTop

為了理解方便這些屬性，我們需要知道 HTML 元素的實際內容有可能比分配用來容納內容的盒子更大，因此可能會出現滾動條，內容區域是視口，當實際內容比視口大的時候，需要把元素的滾動條位置考慮進去。

clientHeight 和 clientWidth 用于描述元素內尺寸，是指元素內容+內邊距大小，不包括邊框(IE下實際包括)、外邊距、滾動條部分

offsetHeight 和 offsetWidth 用于描述元素外尺寸，是指元素內容+內邊距+邊框，不包括外邊距和滾動條部分

clinetTop 和 clinetLeft 返回內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框寬度

offsetTop 和 offsetLeft 表示該元素的左上角(邊緣外邊框)與已定位的父容器(offsetParent對象)左上角的距離

offsetParent 對象是指元素最近的定位(relative、absolute)祖先元素，遞歸上溯，如果沒有祖先元素是定位的話，會返回 null

獲取視口大小

網頁上的每個元素，都有 clientHeight 和 clientWidth屬性。這兩個屬性指元素的內容部分再加上 padding 的所占據的視覺面積，不包括 border 和滾動條占用空間。

因此，document 元素的 clientHeight 和 clientWidth 屬性，就代表了網頁的大小

function getViewport(){

if(!document) {

return {}

}

if (document.compatMode === 'BackCompat') {

return {

width: document.body.clientWidth,

height: document.body.clientHeight

};

}

return {

width: document.documentElement.clientWidth,

height: document.documentElement.clientHeight

};

}

復制代碼

上面的 getViewport 函數就是可以返回瀏覽器窗口的高和寬。使用的時候，有三個地方需要注意：

該函數必須在頁面加載完成后才能運行，否則 document 對象還沒有生成，瀏覽器會報錯。

大多數情況下，都是 document.documentElement.clientWidth 返回正確值。但是，在 IE6 的 quirks 模式中， document.body.clientWidth 返回正確的值，因此函數中加入了對文檔模式的判斷

clientWidth 和 clientHeight 都是只讀屬性，不能對它們賦值。

獲取視口大小的另一種方式

網頁中的每一個元素還有 srcollHeight 和 scrollWidth 屬性，指包含滾動在內的該元素的視覺面積。

那么，document 對象的 scrollHeight 和 scrollWidth 屬性就是網頁的大小，意思就是滾動條滾過的所有長度和寬度。

仿照 getViewport 函數，可以寫出 getPagearea() 函數。

function getPagearea(){

?if (document.compatMode == 'BackCompat') {

??return {

??? width: Math.max(document.body.scrollWidth, document.body.clientWidth),

??? height: Math.max(document.body.scrollHeight, document.body.clientHeight)

};

?}

?return {

width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),

?height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)

??};

}

復制代碼

相對文檔與視口的坐標

當我們在計算一個 DOM 元素位置也就是坐標的時候，會涉及到兩種坐標系， 文檔坐標__和__視口坐標。

我們經常用到的document就是整個頁面部分，而不僅僅是窗口可見部分，還包括因為窗口大小限制而出現滾動條的部分，它的左上角就是我們所謂相對于文檔坐標的原點。

視口是顯示文檔內容的瀏覽器的一部分，它不包括瀏覽器外殼(菜單，工具欄，狀態欄等)，也就是當前窗口顯示頁面部分，不包括滾動條。

如果文檔比視口小，說明沒有出現滾動，文檔左上角和視口左上角相同，一般來講在兩種坐標系之間進行切換，需要加上或減去滾動的偏移量(scroll offset)。

為了在坐標系之間進行轉換，我們需要判定瀏覽器窗口的滾動條位置。window對象的pageXoffset和pageYoffset提供這些值，IE 8及更早版本除外。也可以通過scrollLeft和scrollTop屬性獲得滾動條位置，正常情況下通過查詢文檔根節點(document.documentElement)來獲得這些屬性值，但在怪異模式下必須通過文檔的body上查詢。

文檔坐標

任何HTML元素都擁有offectLeft和offectTop屬性返回元素的X和Y坐標，對于很多元素，這些值是文檔坐標，但是對于以定位元素后代及一些其他元素(表格單元)，返回相對于祖先的坐標。我們可以通過簡單的遞歸上溯累加計算

function getElementPosition(e){

let x = 0;

let y = 0;

while (e != null) {

x += e.offsetLeft;

y += e.offsetTop;

e = e.offsetParent;

}

return { x, y };

}

復制代碼

盡管如此，這個函數也不總是計算正確的值，當文檔中含有滾動條的時候這個方法就不能正常工作了，我們只能在沒有滾動條的情況下使用這個方法，不過我們用這個原理算出一些元素相對于某個父元素的坐標。

快速方法：

網頁元素的相對位置就是：

let X = element.getBoundingClientRect().left;

let Y = element.getBoundingClientRect().top;

復制代碼

視口坐標

計算視口坐標就相對簡單了很多，可以通過調用元素的getBoundingClientRect方法。方法返回一個有left、right、top、bottom屬性的對象，分別表示元素四個位置的相對于視口的坐標。getBoundingClientRect所返回的坐標包含元素的內邊距和邊框，不包含外邊距。兼容性很好，非常好用

function getElementViewTop(element){

let actualTop = element.offsetTop;

let current = element.offsetParent;

let elementScrollTop;

while (current !== null) {

actualTop += current.offsetTop;

current = current.offsetParent;

}

if (document.compatMode == 'BackCompat') {

elementScrollTop = document.body.scrollTop;

} else {

elementScrollTop = document.documentElement.scrollTop;

}

return actualTop - elementScrollTop;

}

function getElementViewLeft(element){

let actualLeft = element.offsetLeft;

let current = element.offsetParent;

let elementScrollLeft;

while (current !== null) {

actualLeft += current.offsetLeft;

current = current.offsetParent;

}

if (document.compatMode == 'BackCompat') {

elementScrollLeft = document.body.scrollLeft;

} else {

elementScrollLeft = document.documentElement.scrollLeft;

}

return actualLeft - elementScrollLeft;

}

復制代碼

快速方法：

使用 getboundingClientRect() 方法。它返回一個對象，其中包含了 left 、 top 、 width 、 height 等屬性。

let X = element.getBoundingClientRect().left;

let Y = element.getBoundingClientRect().top;

復制代碼

再加上滾動 距離，就可以得到絕對位置：

const X= element.getBoundingClientRect().left+document.documentElement.scrollLeft;

const Y =element.getBoundingClientRect().top+document.documentElement.scrollTop;

復制代碼

總結

以上是生活随笔為你收集整理的获取html元素的位置,如何获取页面元素的位置的全部內容，希望文章能夠幫你解決所遇到的問題。

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