jQuery源码分析之width,height,innerWidth,innerHieght,outerWidth,outerHeight函数
提前阅读：点击打开链接
（1）源码分析如下：
<pre name="code" class="javascript">jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
//{padding:innerHeight,content:height,"":outerHeight}
//{padding:innerWidth,content:width,"":outerWidth}
jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, function( defaultExtra, funcName ) {
// margin is only for outerHeight, outerWidth
//funcName是innerHeight,height,outerHeight,defaultExtra是padding,content,""
//funcName是innerWidth,width,outerWidth,defaultExtra是padding,content,""
jQuery.fn[ funcName ] = function( margin, value ) {
//每一个函数接受两个参数margin，value。如果不传入参数那么chainable为false
var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
//exta默认是defaultExtra
extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );
//调用底层的access方法
return jQuery.access( this, function( elem, type, value ) {
var doc;
//如果是DOM是window那么获取window.document.documentElement("clientWidth")
if ( jQuery.isWindow( elem ) ) {
// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
// isn't a whole lot we can do. See pull request at this URL for discussion:
// https://github.com/jquery/jquery/pull/764
return elem.document.documentElement[ "client" + name ];
}
// Get document width or height
//如果DOM是document那么首先获取documentElement,返回document.body.scrollWidth,document.scrollWidth,
//document.body.offsetWidth,document.offsetWidth和document.clientWidth最大值!
if ( elem.nodeType === 9 ) {
doc = elem.documentElement;
// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
// unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
return Math.max(
elem.body[ "scroll" + name ], doc[ "scroll" + name ],
elem.body[ "offset" + name ], doc[ "offset" + name ],
doc[ "client" + name ]
);
}
//如果value是undefined，表示获取数据，调用jQuery.css完成，否则调用jQuery.style完成
return value === undefined ?
// Get width or height on the element, requesting but not forcing parseFloat
jQuery.css( elem, type, extra ) :
// Set width or height on the element
jQuery.style( elem, type, value, extra );
}, type, chainable ? margin : undefined, chainable, null );
};
});
});
//调用方式1：
//innerWidth如果没有传入参数表示获取属性，底层调用access方法
//alert($("#content").innerWidth());
//调用方式2：
//把宽度设为150px,chinable是true,传入access的value是150px
//在access里面调用fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
//表示fn表示上面的回调函数，fn(elems[i],"width","150")第一个表示DOM元素
//$("#content").innerWidth(150);
//调用方式3：把innerWidth至少设置为1000
//这时候margin是函数,chainable是padding,传入access的margin是函数。也就是key是函数
//在access里面raw是false,调用为 fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
//第一步：调用fn，就是上面access里面的第二个参数函数，传入DOM和key="width"也就是获取每一个DOM的width值
//第二步：根据获取的值调用我们自己的为innerWidth传入的参数函数，上下文为DOM，第一个参数是DOM下标，第二个参数是该元素的width值!
//第三步:把调用的结果再次调用access的第二个函数参数，第一个参数是DOM，第二个参数是"width"，第三个参数是第二步返回的值，这时候value不是空，表示设置!
//$("#content").innerWidth(function(index,innerWidth){
// return Math.max(innerWidth, 1000);
//})
alert($("#content").outerWidth());
总结：
（1）如果DOM是document那么首先获取documentElement,然后返回document.body.scrollWidth,document.scrollWidth,document.body.offsetWidth,document.offsetWidth和document.clientWidth最大值!
（2）两层each函数的关系图为：
（3）根据后面的jQuery.css的源码分析知道这里的defaultExtra要么为空字符串要么就是非空，所以都会经过parseFloat操作!如果parseFloat之后是Number类型那么就返回number值，否则返回初始值!
vendorPropName源码：
var cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];
function vendorPropName( style, name ) {
// shortcut for names that are not vendor prefixed
if ( name in style ) {
return name;
}
//将name首字母大写，同时用origName保存没有首字母大写之前的名字
// check for vendor prefixed names
var capName = name.charAt(0).toUpperCase() + name.slice(1),
origName = name,
i = cssPrefixes.length;
while ( i-- ) {
name = cssPrefixes[ i ] + capName;
if ( name in style ) {
return name;
}
}
return origName;
}
//打印[object CSSStyleDeclaration]
//alert($("#content")[0].style);
alert(vendorPropName($("#content")[0].style,"-webkit-border-radius"));jQuery.cssHooks源码：
cssHooks: {
opacity: {
get: function( elem, computed ) {
if ( computed ) {
// We should always get a number back from opacity
var ret = curCSS( elem, "opacity" );
return ret === "" ? "1" : ret;
}
}
}
}jQuery.cssProps源码：
cssProps: {
// normalize float css property
"float": support.cssFloat ? "cssFloat" : "styleFloat"
}jQuery.cssNormalTransform源码：
cssNormalTransform = {
letterSpacing: "0",//如果letterSpacing是normal那么设置为0
fontWeight: "400"//如果font-weight是normal，那么把它设置为400
}curCss源码：
<pre name="code" class="javascript">//如果window有getComputedStyle方法
if ( window.getComputedStyle ) {
getStyles = function( elem ) {
// Support: IE<=11+, Firefox<=30+ (#15098, #14150)
// IE throws on elements created in popups
// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
if ( elem.ownerDocument.defaultView.opener ) {
return elem.ownerDocument.defaultView.getComputedStyle( elem, null );
}
//返回[object CSSStyleDeclaration]
return window.getComputedStyle( elem, null );
};
//调用：val = curCSS( elem, name, styles );
curCSS = function( elem, name, computed ) {
var width, minWidth, maxWidth, ret,
style = elem.style;
computed = computed || getStyles( elem );
//如果getComputedStyle返回值存在那么继续调用getPropertyValue就可以了，在IE9
//中直接用下标调用可以了，如果getComputedStyle不存在，那么返回undefined
// getPropertyValue is only needed for .css('filter') in IE9, see #12537
ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined;
if ( computed ) {
//如果获取到的属性值为空字符串同时该元素所在的文档不包括自身，那么调用jQuery.style
if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {
ret = jQuery.style( elem, name );
}
// A tribute to the "awesome hack by Dean Edwards"
// Chrome < 17 and Safari 5.0 uses "computed value" instead of "used value" for margin-right
// Safari 5.1.7 (at least) returns percentage for a larger set of values, but width seems to be reliably pixels
// this is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
//var rnumnonpx = new RegExp( "^(" + pnum + ")(?!px)[a-z%]+$", "i" );
//var rmargin = (/^margin/);
//chrome<17和Safari5特殊处理，通过调用getComputedStyle获取元素的cssDeclaration对象，然后获取该对象的width
if ( rnumnonpx.test( ret ) && rmargin.test( name ) ) {
// Remember the original values
//记住原始的width,minWidth,maxWidh
width = style.width;
minWidth = style.minWidth;
maxWidth = style.maxWidth;
//对minWidth,maxWidth,width赋值为新值，该值通过getComputedStyle方法获取到
// Put in the new values to get a computed value out
style.minWidth = style.maxWidth = style.width = ret;
ret = computed.width;
// Revert the changed values
style.width = width;
style.minWidth = minWidth;
style.maxWidth = maxWidth;
}
}
// Support: IE
// IE returns zIndex value as an integer.
return ret === undefined ?
ret :
ret + "";
};//End of curCss function
//如果getComputedStyle不存在，那么判断document.documentElement.currentStyle
} else if ( document.documentElement.currentStyle ) {
//用元素的currentStyle就可以了!
getStyles = function( elem ) {
return elem.currentStyle;
};
//调用：val = curCSS( elem, name, styles );
curCSS = function( elem, name, computed ) {
var left, rs, rsLeft, ret,
style = elem.style;
//获取到currentStyle对象（注意，第三个参数可以直接传入style对象作为computed）
computed = computed || getStyles( elem );
//如果currentStyle存在，获取属性值
ret = computed ? computed[ name ] : undefined
// Avoid setting ret to empty string here
// so we don't default to auto
//元素的style对象存在，style的name属性值存在，但是currentStyle相关属性不存在
//那么把结果赋值为style对象的相关属性!
if ( ret == null && style && style[ name ] ) {
ret = style[ name ];
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
// but not position css attributes, as those are proportional to the parent element instead
// and we can't measure the parent instead because it might trigger a "stacking dolls" problem
//var rnumnonpx = new RegExp( "^(" + pnum + ")(?!px)[a-z%]+$", "i" );
//var rmargin = (/^margin/);
if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {
// Remember the original values
left = style.left;
rs = elem.runtimeStyle;
rsLeft = rs && rs.left;
// Put in the new values to get a computed value out
if ( rsLeft ) {
rs.left = elem.currentStyle.left;
}
style.left = name === "fontSize" ? "1em" : ret;
ret = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
if ( rsLeft ) {
rs.left = rsLeft;
}
}
// Support: IE
// IE returns zIndex value as an integer.
return ret === undefined ?
ret :
ret + "" || "auto";
};
}
curCss方法总结：
（1）获取元素的style属性，如果window上有getComputedStyle就直接调用，但是调用的时候为了支持IE<11,FF<30+我们会判断elem.ownerDocument.defaultView.opener是否存在，存在就调用elem.ownerDocument.defaultView.getComputedStyle方法
（2）currentStyle是IE浏览器自娱自乐的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。
（3）getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：
window.getComputedStyle(element, null).getPropertyValue("float");
如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！
使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");参见点击打开链接
（4）width重新设置为新的值以后浏览器会进行重排版，chrome<17和safari5.0用这种方式获取到margin-right等!