5.2.2 width&heigth
对于元素的宽度和高度，dom元素提供了 client(clientHeight,clientWidth)、offset(offsetHeight,offsetwidth)、 scroll(srollHeight,srollWidth)三种方式，这三种有什么区别呢？ client=content+padding。Offset=content+padding+border。Scroll的宽度和 高度都是没有经过scroll的原始宽度和高度。也就是这个一般会大于现在显示的 尺寸。
Jquery也提供了三种相关的宽度和高度。Height", "Width"是元素的content的宽度和高度。innerHeigh, innerWidth是 在元素的内容之上加上padding。其实就是clientHeight,clientWidth。 outerHeigh、outerWidth是在元素的内容上加上padding、border、margin。
Jquery的这三类方法比元素的方法的好处在于它们能测量不可见的元素 的宽度和高度。
另外document.body 的值在不同浏览器中有不同解释（ 实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的）document.documentElement是兼容的。
// 为jQuery对象注册height,width方法
//取得第一个匹配 元素当前计算的高（宽）度值（px）。或设值
//在 jQuery 1.2 以后可以 用来获取 window 和 document 的高（宽）jQuery.each(["Height", "Width"],
function(i, name) {
var type = name.toLowerCase();
jQuery.fn[type] = function(size) {// window的宽度和高度
return this[0] == window ? (// window的宽 度和高度 ①
jQuery.browser.opera&& document.body["client" + name]
|| jQuery.browser.safari&& window["inner" + name]
|| document.compatMode == "CSS1Compat"&& document.documentElement["client"+ name]
|| document.body["client"+ name])
: this[0] == document ? (// document的宽度和高度 ②
Math.max (Math.max( document.body["scroll"+ name],
document.documentElement["scroll"+ name]),
Math.max(
document.body["offset"+ name], document.documentElement["offset"+ name])))
: (size == undefined ? (// 第一个元素的的宽度和高度 ③
this.length ? jQuery.css(this[0], type) : null)
: // 设定当前对象所有元素宽度和高度
this.css (type, size.constructor == String?
size: size+ "px"));
};
});
在上面的代码 中可以看出"Height", "Width"分成三个部分，①处是对 window的宽高取值,这其实就是document的client的宽高度。 document.documentElement指的是<html>，而document.body指的是 <body>它们两者之间的区别不大。CSS1Compat的模式下，body外的元素都 不会计算宽高的。
②是对document求宽高，它的的值可能会大于window 。因为offset比client多了一个border的尺寸。而且document还会取比offset大 的scroll。
③是取或设其它元素的宽高。取值是通过jQuery.css来完成 的，而设值是通过this.css来完成的，这个在5.2.1中讲过。接下看看 jQuery.css。
// 取得elem的name的属性值
css : function(elem, name, force) {
// 对元素的宽度高度修正
if (name == "width" || name == "height") {
var val,props = {position : "absolute",
visibility : "hidden",display : "block"},
which = (name == "width" ? ["Left", "Right"] : ["Top","Bottom"]);
function getWH() {// 求元素的实际高度，宽度 offsetWidth=padding+border+element
val = name == "width"? elem.offsetWidth: elem.offsetHeight; var padding = 0, border = 0;
jQuery.each(which, function() {
padding += parseFloat( // paddinLeft,paddingRight
jQuery.curCSS(elem, "padding" + this, true))|| 0;
border += parseFloat(// borderLeftWidth,borderRightWith
jQuery.curCSS(elem, "border"+ this + "Width", true))|| 0;
});
//http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx //http://msdn.microsoft.com/en-us/library/ms534304(VS.85).aspx
//offsetwidth-paddinLeft-paddingRight-orderLeftWidth- borderRightWith
val -= Math.round(padding + border);//height 也同样要减去。
}
//可见就取得实际元素的w,h。除 padding,border
if (jQuery(elem).is(":visible"))getWH ();
// 元素看不到的情况下，通过使元素暂时为绝对定位， display:block等来取高度或宽度
else jQuery.swap(elem, props, getWH);
return Math.max(0, val);
}
return jQuery.curCSS(elem, name, force);
},