逆战班：js中的位置和宽高

逆战班：js中的位置和宽度
一、宽高
1、客户宽高
元素.clientWidth
元素.clientHeight
2、偏移宽高
元素.offsetWidth
元素.offsetHeight
3、滚动宽高
元素.scrollWidth
元素.scrollHeight
注： （1）以上所有的宽高，基于元素被加入到DOM渲染树后，也就是被添加在页面中以后，才可以获取，并且图片这类后加载元素无法获取宽高 （异步原因造成）
（2）异步 当运行某个需要一段时间完成的内容时，可以先继续向后执行代码，加载和执行后面是同时进行的
（3）同步 上一步执行完成再执行下一步
4、getComputedStyle(div).width和clientWidth的不同
var div=document.querySelector(“div”);
console.log(getComputedStyle(div).width); //样式值 50px
console.log(div.clientWidth); //样式的数值 50
5、元素
（1）console.log(div.clientWidth,div.clientHeight);
//70 width+padding 有滚动条 width+padding-17（滚动条宽高）

（2）console.log(div.offsetWidth,div.offsetHeight);
//74 width+padding+border 实际这个div的占位宽高
（3）console.log(div.scrollWidth,div.scrollHeight);
//70 width+padding 有滚动条 因为内容宽度不同，实际内容宽度+padding
6、document.body body元素以外的宽高
document.documentElement html 页面宽高
7、body的不同情况
（1） console.log(document.body.clientWidth,document.body.clientHeight);
页面宽度-16（默认8个像素的宽度） 高度0（因为没有内容）如果有内容会撑开
元素有多高，就会撑开多少 ，宽度是可视宽度
（2）获取页面的可视宽高 ，并不会因为内容变大而撑开console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
（3） body的offsetWidth和clientWidth相同
console.log(document.body.offsetWidth,document.body.offsetHeight);
（4）获取页面的可视宽度，高度是8 ，有内容，宽度仍然是可视宽度，html的高度是body内容高度+bodyMargin
console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);
（5）没有内容时和body的clientWidth、clientheight相同，有内容，内容撑开的宽高，和clientHeight相同，内容宽度
console.log(document.body.scrollWidth,document.body.scrollHeight);
8、重点：
1、内容高度 console.log(document.body.clientHeight);
2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
3、有滚动条时，内容宽高 console.log(document.body.scrollWidth,document.body.scrollHeight);
注： 如果没有body没有高度，则是可视宽高
如果body有宽高，不超过可视宽高，则是可视宽高
如果body的宽高超出可视范围，则是body宽高+margin(宽度+margin，高度+margin*2)二、位置
1、元素
（1）offsetLeft、offsetTop，定位后元素相对父容器的距离
（2）scrollLeft，scrollTop,元素内的滚动条位置
（3）getBoundingClientRect()获取元素的矩形界限范围
注：（1）没有定位时，相对页面的左上顶角位置
（2）如果定位 相对父容器左上角位置和css中left，top相同
（3）是元素上的滚动条位置 仅这两个属性可以设置
console.log(div1.scrollLeft,div1.scrollTop); div1.scrollTop=157;
（4）(div1.scrollHeight-div1.clientHeight)这个就是最大滚动位置,到底
（5）操作滚动条触发执行函数
div1.οnscrοll=function(){
console.log(div1.scrollTop);//获取滚动条位置
}
（6） IE8以后才有的方法：获取元素的矩形界限范围
var rect=div1.getBoundingClientRect();
console.log(rect);
{
width, //offsetWidth
height, //offsetHeight
left, //最左边到可视窗口的距离
top, //最顶部到可视窗口的距离
right, //left+width 最右边到可视窗口的距离
bottom, //top+height 最下面到可视窗口的距离
x, //left
y //top
}
2、html body
（1）body 和 html没有边线，所有这两个值都是0；因为body和html标签都是最顶端，最外层，这两个值都是0
（2）函数：
window.οnscrοll=function(){
console.log(document.body.scrollTop,“body”);//早期谷歌浏览器和苹果浏览器是body
//window的滚动条是document.documentElement的scrollTop
console.log(document.documentElement.scrollTop,“html”);
}
（3）window窗口的滚动条位置获取和设置
document.documentElement.scrollLeft
document.documentElement.scrollTop