JS中的宽高和位置

document.body           body
document.documentElement     html

宽高：

元素有多高，就会撑开多少（内容高度） ，宽度是可视宽度

document.body.clientWidth,document.body.clientHeight

获取页面的可视宽高 ，并不会因为内容变大而撑开

document.documentElement.clientWidth,document.documentElement.clientHeight

body的offsetWidth和clientWidth相同

document.body.offsetWidth,document.body.offsetHeight

页面的可视宽度，高度是8 ，有内容，宽度仍然是可视宽度，html的高度是body内容高度+bodyMargin

document.documentElement.offsetWidth,document.documentElement.offsetHeight

没有内容时和body的clientWidth相同，有内容，内容撑开的宽高，和clientHeight相同，内容宽度

document.body.scrollWidth,document.body.scrollHeight

如果body没有高度，则是可视宽高
如果body有宽高，不超过可视宽高，则是可视宽高
如果body的宽高超出可视范围，则是body宽高+margin

document.documentElement.scrollWidth,document.documentElement.scrollHeight

常用：

内容高度

 console.log(document.body.clientHeight);

可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
有滚动条时，内容宽高 console.log(document.body.scrollWidth,document.body.scrollHeight);

位置：

div1的边线（border）宽高

div1.clientLeft,div1.clientTop

没有定位时，相对页面的左上顶角位置
如果定位 相对父容器左上角位置 和css中left，top相同

div1.offsetLeft,div1.offsetTop

元素上的滚动条位置

div1.scrollLeft,div1.scrollTop

getBoundingClientRect()获取元素的矩形界限范围

var rect=div1.getBoundingClientRect();
        console.log(rect);

width, //offsetWidth
height, //offsetHeight
left, //最左边到可视窗口的距离
top, //最顶部到可视窗口的距离
right,//left+width 最右边到可视窗口的距离
bottom,//top+height 最下面到可视窗口的距离
x, //left
y //top
window窗口的滚动条位置获取和设置

document.documentElement.scrollLeft，document.documentElement.scrollTop