JS获取元素尺寸、元素偏移量、浏览器窗口尺寸

一、 获取元素尺寸

元素的占地面积
占地面积： 内容区域 + padding + border

1. offsetWidth 和 offsetHeight

语法：元素.offsetWidth
           元素.offsetHeight

得到： 元素的 内容 + padding + border 区域的尺寸

2. clientWidth 和 clientHeight

语法：元素.clientWidth
           元素.clientHeight

得到： 元素 内容 + padding 区域的尺寸

注意： display : none; 以后是 0

二、 获取元素的偏移量

一个元素相对于参考系的坐标位置

1. offsetParent

语法：元素.offsetParent

作用： 拿到 该元素获取偏移量 的时候的参考 父元素
（当你想给这个元素设置一个绝对定位的时候，它会根据谁来定位，他的 offsetParent 就是谁）

2. offsetLeft 和 offsetTop

语法：元素.offsetLeft
           元素.offsetTop

得到： 元素 相对于参考父级 的 左边 和 上边 的 偏移量

注意：当你定义 right 和 bottom 的时候，会自动给你换算成 left 和 top

三、 获取浏览器窗口尺寸

1. BOM级别的获取

innerWidth
innerHeight

拿到的是 包含滚动条 的尺寸

2. DOM级别的获取

document.documentElement.clientWidth
document.documentElement.clientHeight

获取页面的哪一部分尺寸