浏览器有关的宽高详解编程语言

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; 

13496.html

cjavamacwindows