元素的宽高
以下所有的宽高，基于元素被加入到DOM渲染树后，也就是被添加在页面中以后，才可以获取
当元素没有滚动条时
元素.clientWidth
等于元素的width+padding
元素.clientHeight
等于元素的height+padding
元素.offsetWidth
等于元素的width+padding+border
元素.offsetHeight
等于元素的height+padding+border
元素.scrollWidth
等于元素的width+padding
元素.scrollHeight
等于元素的height+padding
当元素有滚动条时
元素.clientWidth
等于元素的width+padding-17（滚动条宽高）
元素.clientHeight
等于元素的height+padding-17（滚动条宽高）
元素.offsetWidth
等于元素的实际占位的宽度
元素.offsetHeight
等于元素的实际占位的高度
元素.scrollWidth
因为内容宽度不同，等于元素的实际内容宽度+padding
元素.scrollHeight
因为内容高度不同，等于元素的实际内容高度+padding
body，HTML的宽高
document.body.clientWidth,document.body.clientHeight （body的clientHeight 和clientWidth ）
页面宽度-16（默认8个像素的宽度） 高度0（因为没有内容）如果有内容会撑开
document.body.offsetWidth,document.body.offsetHeight（body的offsetWidth和offsetHeight）
与body的clientWidth、clientHeight相同
document.body.scrollWidth,document.body.scrollHeight（body的scrollWidth和scrollHeight）
没有内容时和body的clientWidth相同，有内容，内容撑开的宽高，和clientHeight相同，是内容宽高
document.documentElement.clientWidth,document.documentElement.clientHeight（HTML的clientHeight 和clientWidth）
获取页面的可视宽高 ，并不会因为内容变大而撑开
document.documentElement.offsetWidth,document.documentElement.offsetHeight（HTML的offsetHeight和offsetWidth）
获取页面的可视宽度，html的高度是body内容高度+bodyMargin
document.documentElement.scrollWidth,document.documentElement.scrollHeight（HTML的scrollWidth和scrollHeight）
如果没有body没有高度，则是可视宽高
如果body有宽高，不超过可视宽高，则是可视宽高
如果body的宽高超出可视范围，则是body宽高+margin(宽度+margin，高度+margin*2)
元素的位置属性
元素.clientLeft,元素.clientTop
等于元素的border
元素.offsetLeft,元素.offsetTop
没有定位时，相对页面的左上顶角位置
如果定位 相对父容器左上角位置 和css中left，top相同
元素.scrollLeft,元素.scrollTop
元素上的滚动条位置
body，HTML的位置属性
document.body.clientLeft,document.body.clientTop
document.documentElement.clientLeft,document.documentElement.clientTop
body 和 html没有边线，所有这两个值都是0
document.body.offsetLeft,document.body.offsetTop
document.documentElement.offsetLeft,document.documentElement.offsetTop
因为body和html标签都是最顶端，最外层，这两个值都是0
document.documentElement.scrollLeft，document.documentElement.scrollTop
window的滚动条是document.documentElement的scrollTop
window窗口的滚动条位置获取和设置可以通过document.documentElement.scrollLeft，document.documentElement.scrollTop来实现
来源：https://www.cnblogs.com/limengbo2020/p/12642946.html