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

核心提示： jQuery.css大部分是调用jQuery.curCSS来完成工作的，它只是完成了对元素的宽高进行修改，Jquery源码分析－－-DOM元素（中）(3)，因为CSS中的宽高度的属性在IE、FF的浏览器是完全不一样的，IE中是content、padding、border的尺寸的总和，inn

jQuery.css大部分是调用jQuery.curCSS来完成工作的，它只是完成了对元素的宽高进行修改。因为CSS中的宽高度的属性在IE、FF的浏览器是完全不一样的。IE中是content、padding、border的尺寸的总和，而FF中仅仅是content的尺寸。

在jQuery.css为了保证兼容性，把标准的content的尺寸作为每个浏览器的尺寸。每种浏览器的CSS Box 模式是不一样，但是它们的元素的offsetHeight（width）是一样的。取得元素的宽高只要在offset上面减去padding和border就可以了。

对于不可见的元素，浏览器不计算其尺寸，可以通过先可见计算其size然后恢复。这个的实现在jQuery.swap(elem, props, getWH)中。

// 改变elem的options指定的属性以便执行callback中使用，完成之后又恢复原定属性。
swap : function(elem, options, callback) {
　　　　　 var old = {};
　　　　　 for (var name in options) {// 替换elem.style中的属性
　　　　　　　old[name] = elem.style[name];
　　　　　　　elem.style[name] = options[name];
　　　　　 }
　　　　　 callback.call(elem);
　　　　　 for (var name in options) // 重新换回原来的属性
　　　 elem.style[name] = old[name];
　　 },

接下来我们分析jquery的。innerHeigh, innerWidth、outerHeigh、outerWidth。它们是在一起实现的。

// Create innerHeight, innerWidth, outerHeight and outerWidth methods
jQuery.each(["Height", "Width"], function(i, name) {
　　var tl = i ? "Left" : "Top", // top or left i=0时，为false
　　　　r = i ? "Right" : "Bottom"; // bottom or right
jQuery.fn["inner" + name] = function() {// inner的尺寸　　　　　　①
　　　　　 return this[name.toLowerCase()]() + num(this, "padding" + tl)
　　　　　　　　　+ num(this, "padding" + br);
　　　 };
jQuery.fn["outer" + name] = function(margin) {//outer的尺寸　　　②
　　　　eturn this["inner" + name]()
　　　　　　　　　+ num(this, "border" + tl + "Width")
　　　　　　　　　+ num(this, "border" + br + "Width")
　　　　　　　　　+ (margin ? num(this, "margin" + tl)
　　　　　　　　　　　　 + num(this, "margin" + br) : 0);
　　　 };
　　});