宽高和位置 在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、内容高度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.clientTop
2、 因为body和html标签都是最顶端，最外层，这两个值都是0 document.body.offsetLeft,document.body.offsetTop document.documentElement.offsetLeft,document.documentElement.offsetTop
3、 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
