JavaScript之窗口、视口、元素的大小

接触一段时间的JavaScript，总是对浏览器的窗口、视口、元素的大小分不清，不清楚使用场景，这次趁着第二次阅读《JavaScript高级程序设计语言（第三版）》的机会，来对它们做一个总结，加深印象，减少困惑。

窗口和视口的问题

不同的浏览器，不同版本的浏览器以及不同的客户端，所表现出来的窗口和视口信息都有所差异。
在IE9+。Firefox、Safari、Chrome和Opera 提供了四个属性：innerWidth、innerHeight、outerHeight和outerWidth。在IE9+、Safari和Firefox中，outerWidth 和 outerHeight 返回的是页面窗口的大小；而在Opera中，outerWidth 和 outerHeight 返回的是页面视图容器的大小，innerWidth 和 innerHeight 这表示不包括边框的页面视图容器的大小；在chrome中，这四个属性返回的值是相同的，即视口（viewport）的大小而非是浏览器窗口的大小。
在IE8及更早的版本没有提供取得当前浏览器的窗口尺寸属性；不过可以通过DOM 的页面可见区域的信息获得页面视口的大小，如下代码显示：

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pagewidth != "number") {
  if(document.compatMode == "CSS1Compat") {
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document,body.clientheight；
  }
}

以上代码中，CSS1Compat 是指浏览器的渲染模式为标准模式，还有一个渲染模式是混杂模式：backCompat，是针对IE8及更早版本。

对于移动设备：
window.innerWidth和window.innerHeight保存着可见视口（屏幕上可见区域的大小），移动IE浏览器不支持这些属性，但通过document.documentElement.clientWidth和document.documentElement.clientHeight提供了相同的信息，随着页面的变化，这些值也会相应变化。

在其他移动浏览器中，document.documentElement度量的是布局视口，即渲染后页面的实际大小（可见视口是整个页面中的一部分），移动IE浏览器把布局视口的信息保存在document.body.clientWidth和document.body.clientHeight中，这些值不会随着页面缩放而变化。

元素大小问题

clientWidth 和 clientHeight
这两个属性值的是：元素的内容及其内边距所占据的空间，如下图所示：

image.png

如上图显示，这两个属性并不包括边框的宽度。

offsetWidth、offsetHeight、offsetLeft 和 offsetTop
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包含元素的宽度、垂直滚动条的宽度和边框宽度。
offsetHeight：元素在垂直方向上占用的空间的大小，以像素计。包含元素的高度、水平滚动条的高度和边框的宽度。
offsetLeft： 元素左边框至包含元素（offsetParent）的左内边框之间的距离。
offsetHeight：元素上边框至包含元素（offsetParent）的上边框之间的距离。
如下图显示上述四个属性之间的关系：

image.png

滚动大小（包含滚动内容的元素的东西）：scrollHeight、scrollWidth、scrollLeft 和 scrollTop
scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth： 在没有滚动条的情况下，元素内容的总宽度。
scrollTop：被隐藏在内容区域上方的像素数。
scrollLeft：被隐藏在内容区域左侧的像素数。

image.png

戳我博客