Jquery源码分析－－-DOM元素（中）

核心提示：5.2.2 width&heigth对于元素的宽度和高度，dom元素提供了client(clientHeight,clientWidth)、offset(offsetHeight,offsetwidth)、scroll(srollHeight,srollWidth)三种方式，Jquery源码分析－－-DOM元素（中），

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"));
　　　　　};
});