获取元素偏移量
就是元素在页面上相对于参考父级的左边和上边的距离
offsetParent
- 获取元素的偏移量参考父级 就是父级标签
- 其实就是假设你要给一个元素 绝对定位 的时候
- 它是根据谁来进行定位的, 那么这个元素的偏移量参考父级就是谁
offsetLeft / offsetTop
- 获取的事元素左边的偏移量和上边的偏移量
- offsetLeft 该元素相对于参考父级的左侧偏移量
- offsetTop 该元素相对于参考父级的上侧偏移量
获取元素尺寸
获取元素的占地面积
offsetWidth 和 offsetHeight
- offsetWidth: 获取元素内容 + padding + border 的宽度
- offsetHeight: 获取元素内容 + padding + border 的高度
clientWidth 和 clientHeight
- clientWidth 获取元素内容 + padding 的宽度
- clientHeight 获取元素内容 + padding 的高度
注意
- 获取到的尺寸是没有单位的数字
- 当元素在页面中不占位置的时候, 获取到的是 0
display: none元素在页面不占位visibility: hidden元素在页面占位
获取浏览器窗口尺寸
可视区域的尺寸 不包括滚动条
- document.documentElement.clientWidth: 浏览器可视窗口的宽度
- document.documentElement.clientHeight: 浏览器可视窗口的高度
