JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth，clientTop和clientLeft等区别
在JS中的位置和宽度，也就是：clientWidth、offsetWidth、scrollWidth，clientTop和clientLeft本身上是有区别的，在获取的方式上也有着很大的区别，在元素本身上还有在html和body上获取到的信息都有着区别。
首先是获取宽高
获取宽高的方式为以下几种
元素.clientWidth客户宽高
元素.clientHeight
元素.offsetWidth偏移宽高
元素.offsetHeight
元素.scrollWidth滚动宽高
元素.scrollHeight
注意
以上所有的宽高，基于元素被加入到DOM渲染树后
也就是被添加在页面中以后，才可以获取
并且图片这类后加载元素无法获取宽高（异步原因造成）
补充：
异步： 当运行某个需要一段时间完成的内容时，可以先继续向后执行代码，加载和执行后面是同时进行的
同步： 上一步执行完成再执行下一步
元素
clientWidth和clientHeight
下面div代表的是元素
console.log(div.clientWidth,div.clientHeight);
上面获取到的宽高是：width+padding
如果有滚动条时会是：width+padding-17（滚动条宽高）
offsetWidth和offsetHeight
下面div代表的是元素
console.log(div.offsetWidth,div.offsetHeight);
上面获取到的宽高是：width+padding+border也就是这个元素的实际占位宽高（加上边框）
scrollWidth和scrollHeight
下面div代表的是元素
console.log(div.scrollWidth,div.scrollHeight);
上面获取到的宽高是：width+padding
如果有滚动条时会是：因为内容宽度不同，实际内容宽度+padding
元素以外的宽高，页面宽高
注意
document.body表示的是：body
document.documentElement表示的是：html
clientWidth和clientHeight
body：
console.log(document.body.clientWidth,document.body.clientHeight);
上面获取到的宽高是：页面宽度-16（默认8个像素的宽度） 高度0（因为没有内容）
如果有内容会撑开，元素有多高，就会撑开多少，宽度是可视宽度
Html：
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
上面获取到的宽高是：页面的可视宽高，并不会因为内容变大而撑开
offsetWidth和offsetHeight
body：
console.log(document.body.offsetWidth,document.body.offsetHeight);
上面获取到的宽高是：页面宽度-16（默认8个像素的宽度） 高度0（因为没有内容）
如果有内容会撑开，元素有多高，就会撑开多少，宽度是可视宽度
Html：
console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);
上面获取到的宽高是：页面的可视宽度，高度是8
在body有内容时，宽度仍然是可视宽度，但html的高度是body内容高度+bodyMargin
scrollWidth和scrollHeight
body：
console.log(document.body.scrollWidth,document.body.scrollHeight);
上面获取到的宽高是：在没有内容时和body的clientWidth相同
如果有内容时，内容撑开的宽高，和clientHeight相同，内容宽高
Html：
console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);
如果没有body没有高度，则是可视宽高
如果body有宽高，不超过可视宽高，则是可视宽高
如果body的宽高超出可视范围，则是body宽高+margin(宽度+margin，高度+margin*2)
特别注意-以后常用：
1、内容高度 console.log(document.body.clientHeight);
2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
3、有滚动条时，内容宽高 console.log(document.body.scrollWidth,document.body.scrollHeight);
获取位置的方式
clientLeft 和 clientTop
offsetLeft 和 ffsetTop
scrollLeft 和 crollTop
元素
clientLeft和clientTop
console.log(div1.clientLeft,div1.clientTop);
得到的是边线宽高
offsetLeft和offsetTop
console.log(div1.offsetLeft,div1.offsetTop);
没有定位时，相对页面的左上顶角位置
如果定位相对父容器左上角位置和css中left，top相同
scrollLeft和scrollTop
console.log(div1.scrollLeft,div1.scrollTop);
是元素上的滚动条位置仅这两个属性可以设置
特别注意
IE8以后才有的方法getBoundingClientRect
var rect=div1.getBoundingClientRect();
console.log(rect);
{
width, //offsetWidth
height, //offsetHeight
left, //最左边到可视窗口的距离
top, //最顶部到可视窗口的距离
right,//left+width 最右边到可视窗口的距离
bottom,//top+height 最下面到可视窗口的距离
x, //left
y //top
}
元素的
1、offsetLeft、offsetTop，定位后元素相对父容器的距离
2、scrollLeft，scrollTop,元素内的滚动条位置
3、getBoundingClientRect()获取元素的矩形界限范围
html body
clientLeft和clientTop
console.log(document.body.clientLeft,document.body.clientTop)
console.log(document.documentElement.clientLeft,document.documentElement.clientTop)
body和 html没有边线，所有这两个值都是0
offsetLeft和offsetTop
console.log(document.body.offsetLeft,document.body.offsetTop)
console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)
因为body和html标签都是最顶端，最外层，这两个值都是0
scrollLeft和scrollTop
window.onscroll=function(){
console.log(document.body.scrollTop,"body");//早起谷歌浏览器和苹果浏览器是body
// window的滚动条是document.documentElement的scrollTop
console.log(document.documentElement.scrollTop,"html");
}
