元素尺寸

在平时开发中，我会需要获取一些元素的实际尺寸信息，下面就记录了一下获取尺寸的方法。以下内容是整理自红宝书中。

偏移尺寸（offset dimensions）

偏移尺寸，包含元素在屏幕上所占用的所有的视觉空间。元素在页面上的视觉空间是由其的宽高决定的，包含所有的内边距、滚动条和边框（不包含外边距）。以下四个属性用于取得元素的偏移尺寸。

• offsetHeight，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度（如果页面上可见）和上下边框的高度。
• offsetLeft，元素左边框外侧距离包含元素左边框内侧的像素数
• offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数
• offsetWidth，元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度（如果可见）和左、右边框的宽度。
  其中，offsetLeft和offsetTop是相对于包含元素的，包含元素保存在offsetParent属性中，但是不一定是parentNode。比如元素的offsetParent是作为其祖先的元素，因为是节点层级中第一个提供尺寸的元素。
  

  要确定一个元素在页面中的偏移量，可以把它的offsetLeft和offsetTop属性分别与offsetParent的相同属性相加，一直加到根元素。

  function getELementLeft(element) {
    let aLeft = element.offsetLeft
    let current = element.offsetParent
  
    while(current !== null) {
      aLeft += current.offsetLeft
      current = current.offsetParent
    }
  
    return aLeft
  }
  
  function getELementTop(element) {
    let aTop = element.offsetTop
    let current = element.offsetParent
  
    while(current !== null) {
      aTop += current.offsetTop
      current = current.offsetParent
    }
  
    return aTop
  }
  

  客户端尺寸（client dimensions）

  元素的客户端尺寸，包含元素内容及其内边距所占用的空间。客户端尺寸只有两个相关属性：clientWidth和clientHeight。
  
  客户端尺寸实际上就是元素内部的空间，因此不包含滚动条占用的空间。这两个属性最常用于确定浏览器视口尺寸，即检测document.documentElement的clientWidth和clinentHeight。这两个属性表示视口（html或body元素）的尺寸。

  滚动尺寸（scroll dimensions）

  提供了元素内容滚动距离的信息。有些元素，比如html无须任何代码就可以自动滚动，而其他元素则需要使用css的overflow属性让其滚动。滚动尺寸相关的属性有如下4个。

  • scrollHeight，没有滚动条出现时，元素内容总高度。
  • scrollLeft，内容区左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。
  • scrollTop，内容区顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。
  • scrollWidth，没有滚动条出现时，元素内容的总宽度。
    

  scrollWidth 和 scrollHeight 可以用来确定给定元素内容的实际尺寸。例如，元素是浏览器中滚动视口的元素。因此，document.documentElement.scrollHeight 就是整个页面垂直方向的总高度。
  scrollWidth 和 scrollHeight 与 clientWidth 和 clientHeight 之间的关系在不需要滚动的文档上是分不清的。如果文档尺寸超过视口尺寸，则在所有主流浏览器中这两对属性都不相等，scrollWidth 和 scollHeight 等于文档内容的宽度，而 clientWidth 和 clientHeight 等于视口
  的大小。
  scrollLeft 和 scrollTop 属性可以用于确定当前元素滚动的位置，或者用于设置它们的滚动位置。元素在未滚动时，这两个属性都等于 0。如果元素在垂直方向上滚动，则 scrollTop 会大于 0，表示元素顶部不可见区域的高度。如果元素在水平方向上滚动，则 scrollLeft 会大于 0，表示元素左侧不可见区域的宽度。因为这两个属性也是可写的，所以把它们都设置为 0 就可以重置元素的滚动位置。

  // 检测元素是不是位于顶部，如果不是则把它滚动回顶部：
  function scrollToTop(element) { 
   if (element.scrollTop != 0) { 
   element.scrollTop = 0; 
   } 
  } 
  

  确定元素尺寸

  浏览器在每个元素上都暴露了 getBoundingClientRect()方法，返回一个 DOMRect 对象，包含6个属性：left、top、right、bottom、height 和 width。