WEB开发网
开发学院网页设计JavaScript Jquery源码分析---DOM元素(中) 阅读

Jquery源码分析---DOM元素(中)

 2010-09-14 13:36:33 来源:WEB开发网   
核心提示: 在上面的代码中可以看出"Height", "Width"分成三个部分,①处是对window的宽高取值,这其实就是document的client的宽高度,Jquery源码分析---DOM元素(中)(2),document.documentElement

在上面的代码中可以看出"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);
},

上一页  1 2 3 4 5 6 7  下一页

Tags:Jquery 源码 分析

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接