宽高和位置
在JS中我们需要学习DOM元素和页面的宽高及位置。本期小编就元素及页面宽高和位置做出详细解说。
一： 元素宽高

1）三种元素宽高
 元素.clientWidth 客户宽高
 元素.clientHeight元素.offsetWidth 偏移宽高
 元素.offsetHeight元素.scrollWidth 滚动宽高
 元素.scrollHeight

以上所有的宽高，基于元素被加入到DOM渲染树后，也就是被添加在页面中以后，才可以获取
如下面代码；

console.log(div.clientWidth);//无法获取
 document.body.appendChild(div);
 console.log(div.clientWidth);//获取到了

并且图片这类后加载元素无法获取宽高 （异步原因造成）
异步 当运行某个需要一段时间完成的内容时，可以先继续向后执行代码，加载和执行后面是同时进行的
同步 上一步执行完成再执行下一步
2）三者区别

getComputedStyle(div).width;//获取元素宽高为50px padding值20px
 (div.clientWidth,div.clientHeight;
 2.1) 没有滚动条的时候 70px width+padding ‘
 2.1)有滚动条 width+padding-17（滚动条宽高）
 div.offsetWidth,div.offsetHeight;
 2,2) 74px width+padding+border 实际这个div的占位宽高
 div.scrollWidth,div.scrollHeight;
 2.3)没有滚动条 70px width+padding
 2.3) 有滚动条 因为内容宽度不同，实际内容宽度+padding

二： 页面宽高

document.body (body)
 document.documentElement (html)

1,1）body的clientHeight和clientWidth
页面宽度-16（默认8个像素的宽度） 高度0（因为没有内容）如果有内容会撑开
元素有多高，就会撑开多少 ，宽度是可视宽度

document.body.clientWidth,document.body.clientHeight;
2.1）html的clientHeight和clientWidth
 获取页面的可视宽高 ，并不会因为内容变大而撑开
 document.documentElement.clientWidth,document.documentElement.clientHeight;1.2) body的offsetWidth和clientWidth相同
 document.body.offsetWidth,document.body.offsetHeight;2.2) html的offsetwidth和offsetHight
 无内容是获取页面的可视宽度，高度是8
 有内容，宽度仍然是可视宽度，html的高度是body内容高度+bodyMargin
 document.documentElement.offsetWidth,document.documentElement.offsetHeight;1.3) body的scrollwidth和scrollHight;
 没有内容时和body的clientWidth相同
 有内容，内容撑开的宽高，和clientHeight相同，内容宽度
 document.body.scrollWidth,document.body.scrollHeight;2.3) HTML的scrollWH
 如果没有body没有高度，则是可视宽高
 如果body有宽高，不超过可视宽高，则是可视宽高
 如果body的宽高超出可视范围，则是body宽高+margin(宽度+margin，高度+margin*2)
 document.documentElement.scrollWidth,document.documentElement.scrollHeight;3、总结；
 1、内容高度 console.log(document.body.clientHeight);
 2、可视宽高 document.documentElement.clientWidth,document.documentElement.clientHeight
 3、有滚动条时，内容宽高 document.body.scrollWidth,document.body.scrollHeight；

二 、 位置

clientLeft clientTop
 offsetLeft offsetTop
 scrollLeft scrollTop

二.1、 元素位置

1、 边线宽高（border值）
 div1.clientLeft,div1.clientTop;2、 没有定位时，相对页面的左上顶角位置
 如果定位 相对父容器左上角位置 和css中left，top相同
 div1.offsetLeft,div1.offsetTop;3、 是元素上的滚动条位置 仅这两个属性可以设置
 div1.scrollLeft,div1.scrollTop;
 如；div1.scrollTop=157;
 (div1.scrollHeight-div1.clientHeight这个就是最大滚动位置,到底4、 操作滚动条触发执行函数
 div1.οnscrοll=function(){
 console.log(div1.scrollTop);//获取滚动条位置5、IE8以后才有的方法
 获取元素的矩形界限范围
 var rect=div1.getBoundingClientRect();
 {
 width, //offsetWidth
 height, //offsetHeight
 left, //最左边到可视窗口的距离
 top, //最顶部到可视窗口的距离
 right,//left+width 最右边到可视窗口的距离
 bottom,//top+height 最下面到可视窗口的距离
 x, //left
 y //top
 }6、总结；
 6.1、offsetLeft、offsetTop，定位后元素相对父容器的距离
 6.2、scrollLeft，scrollTop,元素内的滚动条位置
 6.3、 getBoundingClientRect()获取元素的矩形界限范围

二.2 、 html body

1、 body 和 html没有边线，所有这两个值都是0
 (document.body.clientLeft,document.body.clientTop
 document.documentElement.clientLeft,document.documentElement.clientTop2、 因为body和html标签都是最顶端，最外层，这两个值都是0
 document.body.offsetLeft,document.body.offsetTop
 document.documentElement.offsetLeft,document.documentElement.offsetTop3、 window.οnscrοll=function(){
 document.body.scrollTop,早起谷歌浏览器和苹果浏览器是body
 而现在window的滚动条是document.documentElement的scrollTop
 document.documentElement.scrollTop,
 }
 并且 document.documentElement.scrollTop=200;

4、总结；
window窗口的滚动条位置获取和设置 document.documentElement.scrollLeft和document.documentElement.scrollTop