元素或者鼠标在页面，视口，屏幕，元素中的位置 。元素和视口的宽度和高度，页面中内容向上滚动的距离。

DOM容易模糊的获取位置，宽度高度的属性 元素或者鼠标在页面，视口，屏幕，元素中的位置 。元素和视口的宽度和高度，页面中内容向上滚动的距离。

DOM 操作 - 获取元素的尺寸

offsetWidth / offsetHeight		内容+内边距+边框
clientWidth / clientHeight		内容+内边距
scrollWidth	/ scrollHeight		内容溢出，考虑溢出内容的宽度；如果内容不溢出同 client 系列一致。

getBoundingClientRect()	返回对象，对象中有 width 和 height 属性，值同 offset 系列一致。

获取视口的尺寸：

window.innerWidth
window.innerHeight

document.documentElement.clientWidth
document.documentElement.clientHeight

// 二者区别
1. 如果窗口没有滚动条，二者获取的结果一致
2. 如果出现了滚动条， window 系列会加上滚动条的宽度/高度； documentElement 系列不计算滚动条

获取整个页面的高度：

document.body.scrollHeight
或者
document.documentElement.scrollHeight

练习题：
1. 获取了一个元素对象赋值给了变量 box，根据要求获取以下信息

① 获取元素在整个页面中（根元素）的位置 （注：该元素的祖先元素没有定位的）

  box.offsetLeft
  box.offsetTop

② 获取元素在视口中的位置

  box.getBoundingClientRect().left
  box.getBoundingClientRect().top

③ 获取元素的宽度和高度（包括内容、内边距和边框）

  box.offsetWidth
  box.offsetHeight

2. 根据要求获取以下信息

① 获取视口的宽度和高度

  window.innerWidth / window.innerHeight
  document.documentElement.clientWidth / document.documentElement.clientHeight

② 获取页面中内容向上滚动的距离 （滚动条向下滚动的距离）

 document.documentElement.scrollTop || document.body.scrollTop

3. 在一个鼠标事件中获取了事件对象，赋值给了变量 event，根据要求获取以下信息
① 获取鼠标在视口上的位置

  event.clientX
  event.clientY

② 获取鼠标在整个页面（根元素）上的位置

  event.pageX
  event.pageY

③ 获取鼠标在屏幕上的位置

  event.screenX
  event.screenY

④ 获取鼠标在目标元素上的位置

  event.offsetX
  event.offsetY

有帮助到的小伙伴可以给小主一个鼓励点赞哦！谢谢！