Jquery源码分析---DOM元素(中)
2010-09-14 13:36:33 来源:WEB开发网在上面的代码中可以看出"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);
},
更多精彩
赞助商链接