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...