DOM 元素大小

DOM 元素大小

window.getComputedStyle(dom 元素,'僞類').屬性名

let style = window.getComputedStyle(element, [pseudoElt]);

https://www.zhangxinxu.com/wo...

https://developer.mozilla.org...

getComputedStyle 是一個能夠獲取當前元素全部最終使用的 CSS 屬性值。返回的是一個 CSS 樣式聲明對象([object CSSStyleDeclaration])，只讀.

這個方法取得值是內容 CSS 區域的值，與 padding、margin和邊框無關。

偏移量

包括元素在屏幕上佔用的全部可見空間，元素的可見大小是由其高度，寬度決定的。包括全部內邊距、滾動條和邊框大小（不包括外邊距）

offsetHeight

元素在垂直方向上的佔用空間大小，以像素計。

content-height + (可見的水平滾動條的高度) + padding-top + padding-bottom + border-left-width + border-right-width

offsetWidth

元素在水平方向上的佔用空間大小，以像素計。

content-width + (可見的垂直滾動條的寬度) + padding-right + padding-left + border-top-width + border-bottom-width

offsetLeft

元素外邊框至包含元素左外邊框的之間的像素距離

offsetTop

元素外邊框至包含元素上外邊框的之間的像素距離

要想知道元素在頁面上方的偏移量，將這個元素的offsetLeft和offsetTop與其offsetParent的屬性相加。循環至根元素，就能夠基本獲得一個準確的值。

function getElementLeft(element) {
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null) {
    actualLeft = actualLeft + current.offetLeft;
    current = current.offsetParent;
  }
  return actualLeft;
}

function getElementLeft(element) {
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null) {
    actualTop = actualTop + current.offsetTop;
    current = current.offsetParent;
  }
  return actualTop;
}

客戶區大小

元素的客戶區指的是元素內容及其邊框所佔據的空間大小。元素內部空間大小，滾動條的空間不算在內。

clientWidth

content-width + padding-left + padding-right + boreder-left-width + boreder-right-width

clientHeight

content-height + padding-top + padding-bottom + boreder-top-width + boreder-bottom-width

function getViewPort() {
  if (document.conpatMode == "BackCompat") {
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  } else {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  }
}

滾動大小

包含滾動內容的元素大小。

scrollHeight

在沒有滾動條的狀況下，元素內容的總高度

scrollWidth

在沒有滾動條的狀況下，元素內容的總寬度

scrollLeft

被隱藏在內容區域左側的像素數。經過設置這個屬性，能夠改變滾動條的位置

scrollTop

被隱藏在內容區域上方的像素數。經過設置這個屬性，能夠改變滾動條的位置

肯定文檔的總高度，必須取得 scrollHeight/clientHeight和 scrollWidth/clientWidth的最大值

肯定元素大小

getBoundingClientRect

返回元素的大小及其相對於視口的位置。

返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合，就是該元素的 CSS 邊框大小

兼容性：

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode)) &&
typeof t.scrollLeft == "number"
  ? t
  : document.body
).scrollLeft(
  // For scrollY
  ((t = document.documentElement) || (t = document.body.parentNode)) &&
    typeof t.scrollTop == "number"
    ? t
    : document.body
).scrollTop;

https://developer.mozilla.org...