简介
window对象表示浏览器打开的窗口（可以省略，全局变量挂载在window对象下，alert，confirm等方法）。document对象是HTML文档，是window对象的一部分(document.body可以写成window.document.body)。
与window有关的宽高介绍
window.innerHeight和window.outerHeight的区别在于，前者是浏览器内部文档的高度，后者是整个浏览器窗口的高度。window.innerWidth和window.outerWidth一般相同。
window.screen代表用户的屏幕。window.screen.height代表整个屏幕的高度，window.screen.availHeight代表屏幕中可利用的高度(比前者少了一个菜单栏)。window.screen.width和window.screen.availWidth相同。
screenTop代表浏览器距离屏幕顶部的距离，screenLeft为浏览器距离屏幕左边的距离.
兼容性问题
window.innerHeight和window.innerWidth(可视区域)在IE8及其以下浏览器是不支持的。所以我们要使用这样的兼容方案
var seeWidth = document.ducumentElement.clientWidth ||
document.body.clientWidth;
var seeHeight = document.ducumentElement.clientHeight ||
document.body.clientHeight;
documentElement
document是文档元素，nodeType = 9，nodeName = #document。documentElement的nodeType = 1， nodeName = HTML。
body既可以通过document.body拿到，也可以通过documentElement的childNodes得到。
document的宽高
这里我们分成三部分：
- 与client相关的宽高
- 与offset相关的宽高
- 与scroll相关的宽高
与client相关的宽高
元素.clientWidth和元素.clientHeight指的是元素的可视部分宽度和高度，即padding + content。(注意如果元素被隐藏了，他的宽高就没有值)。如果没有滚动条，即为元素设定的高度和宽度。如果出现滚动条(比如元素overflow: scroll)，那么该属性就是其本来宽高减去滚动条的宽高。举一个栗子：
body {
border: 20px solid #ccc;
margin: 10px;
padding: 40px;
background: red;
height: 350px;
width: 500px;
overflow: scroll;
}
//430(350 + 80)
console.log(document.body.clientHeight);
//580，不包含border
console.log(document.body.clientWidth);
那么我们再来看一个div
#main {
width: 200px;
height: 200px;
background: red;
border: 1px solid #000;
overflow: auto;
}
//我们在div中不断添加文字直到出现滚动条
var div = document.getElementById('main');
//200
console.log(div.clientHeight);
//在windows下是183，在mac下是200(滚动条没显示的时候)
console.log(div.clientWidth);
那么我们总结一下
//假如无padding无滚动
clientWidth = style.width
//假如有padding无滚动
clientWidth = style.width + style.padding * 2;
//假如有padding有滚动，且滚动是显示的
clientWidth = style.width + style.padding * 2 - 滚动轴宽度
IE6以上浏览器都支持clientHeight和clientWidth。
元素的clientLeft和clientTop这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0
body {
border: 20px solid #ccc;
margin: 10px;
padding: 40px;
background: red;
height: 350px;
width: 500px;
overflow: scroll;
}
//20, clientTop = border-top的border-width
console.log(document.body.clientLeft);
//20，clientLeft = border-left的border-width
console.log(document.body.clientTop);
与offset相关的宽高
offsetWidth和offsetHeight指的是元素的border + padding + content的宽度和高度，该属性和内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关，还是上面的栗子
body {
border: 20px solid #ccc;
margin: 10px;
padding: 40px;
background: red;
height: 350px;
width: 500px;
overflow: scroll;
}
//470(350 + 80 + 40)
console.log(document.body.offsetHeight);
//620
console.log(document.body.offsetWidth);
offsetWidth和offsetHeight所有浏览器的支持一致。
offsetLeft和offsetTop是基于offsetParent的。对于offsetParent，如果当前元素的父级元素没有进行CSS定位(position为absolute或relative)，offsetParent为body，如果当前元素的父级元素中有CSS定位，offsetParent就取最近的那个父级元素。
//在IE6/7中
offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left);
//在IE8/9/10及Chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border宽度) + (offsetParent的padding-left) + (当前元素的margin-left);
//在firefox中
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (当前元素的margin-left)
还是刚才的栗子
body {
border: 20px solid #ccc;
margin: 10px;
padding: 40px;
background: red;
height: 350px;
width: 500px;
overflow: scroll;
}
#main {
width: 400px;
height: 200px;
background: red;
padding: 20px;
margin: 10px;
border: 20px solid #000;
overflow: auto;
}
//我们在div中不断添加文字直到出现滚动条
var div = document.getElementById('main');
//在IE6/7中
console.log(div.offsetLeft); //50
console.log(div.offsetTop); //50
//在IE8/9/10及Chrome中
console.log(div.offsetLeft); //80
console.log(div.offsetTop); //80
//在firefox中
console.log(div.offsetLeft); //60
console.log(div.offsetTop); //60
与scroll相关的宽高
document.body的scrollWidth和scrollHeight与普通元素如div的scollWidth和scrollHeight是有点区别的
body {
border: 20px solid #ccc;
margin: 10px;
padding: 40px;
background: red;
height: 350px;
width: 500px;
overflow: scroll;
}
//浏览器高度
document.body.scrollHeight
//浏览器宽度
document.body.scrollWidth
当给定的宽高小于浏览器窗口，document.body.scrollWidth通常是浏览器窗口的宽度，document.body.scrollHeight 通常是浏览器窗口的高度。如果给定宽高大于浏览器窗口，且内容小于给定宽高，document.body.scrollWidth = 给定的宽度 + 其所有的padding、margin和border。如果给定宽高大于浏览器窗口，且内容大于给定宽高，document.body.scrollWidth = 内容的宽度 + 其所有的padding、margin和border。(有兼容性问题，上述是Chrome浏览器中)
接下来我们看一下普通元素如div中的scrollWidth
#main {
width: 400px;
height: 200px;
background: red;
padding: 20px;
margin: 10px;
border: 20px solid #000;
overflow: auto;
}
var div = document.getElementById('main');
//200 + 20 * 2 = 240
console.log(div.scrollWidth);
//440 + 20 * 2 = 440
console.log(div.scrollHeight);
//接下来我们填充div的内容使其出现滚动轴
我们得出这样一个结论
//在无滚动轴的情况
scrollWidth = clientWidth = style.width + style.padding * 2;
//在有滚动轴的情况下(实际内容超出了定义的宽)
scrollWidth = 实际内容的宽度 + padding * 2;
scrollLeft和scrollTop是可读写的，指的是当元素内容超出其宽高的时候，元素被卷起的高度和宽度。
#main {
width: 400px;
height: 200px;
background: red;
padding: 20px;
margin: 10px;
border: 20px solid #000;
overflow-y: scroll;
}
var div = document.getElementById('main');
//0
console.log(div.scrollTop);
//0
console.log(div.scrollLeft);
div.scrollTop = 20;
console.log(div.scrollTop);
可以通过这个属性获取滚动条距离顶部高度进行可视区域加载，具体可以参考我另一篇博客 lazyLoad与节流
//可视区域
var seeHeight = window.innerHeight || document.documentElementHeight || document.body.clientHeight;
//滚动条距离顶部高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/13496.html