javascript 的各种 width、height
1.窗口大小：
查看《javascript高级程序设计》一书的 Page162，得出结论：
1.无法取得兼容所有浏览器的 浏览器窗口的总大小（ outerWidth() && outerHeigth() ），（safari和firefox可以）
2.除ie之外的浏览器都可以获得视口（viewport）的大小（ innerWidth() && innerHeigth() ）。
3.在大多浏览器中保存了document.documentElement.clientWidth 和 document.documentElement.clientHeight;
（但是 ie6 必须保证是在 标准模式下才有效），如果是混杂模式则，需要document.body.clientWidth 和 document.body.clientHeight
所以：此书提供了获取 页面视口大小的 方法(包括滚动条的宽度)：
var pageWidth=window.innerWidth, pageHeight=window.innerHeight;
if( typeof pageWidth !=="number" ){ //支持IE而写（因为ie9以后才支持innerWidth/innerHeight直取）
if(document.compatMode=="CSS1Compat"){ // 标准模式下
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else { //怪异模式下
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
2.文档大小：
滚动区域大小：之前一直不大理解scrollHeight和scrollWidth 的意思 ，这本书确实很好。参看P264
带有滚动条时：通常认为<html>是web浏览器中滚动的元素，所以带有滚动条的页面的总高度是：
document.documentElement.scrollHeight不带滚动条时：由于各个浏览器的不兼容，要想获得文档（基于视口的最小高度）的总高度，必须取得scrollHeight、clientHeight的最大值。
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
ie混杂模式下，需要用document.body 替代 document.documentElement（判断方法同前）
offsetHeight;offsetWidth (包括内容+padding+border+滚动条的高度宽度（不包括margin）)
元素的客户区大小
clientWidth;clientHeight（包括内容+padding）
那么利用jquery呢？如下：
获取浏览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ：$(window).width(); //应该指的是可视区域，包含滚动条在内。
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内，默认TRUE
options.padding 是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border 是否把边框计算在内，默认true
下面代码可以获得浏览器滚动条的宽度，
/*!
* 获取浏览器竖向滚动条宽度
* 首先创建一个用户不可见、无滚动条的DIV，获取DIV宽度后，
* 再将DIV的Y轴滚动条设置为永远可见，再获取此时的DIV宽度
* 删除DIV后返回前后宽度的差值
*
* @return Integer 竖向滚动条宽度
*/
function getScrollWidth() {
var noScroll, scroll, oDiv = document.createElement("DIV");
oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
noScroll = document.body.appendChild(oDiv).clientWidth;
oDiv.style.overflowY = "scroll";
scroll = oDiv.clientWidth;
document.body.removeChild(oDiv);
return noScroll-scroll;
}
