欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 源码解析(二十九) 样式操作模块 尺寸详解

程序员文章站 2022-05-29 08:04:54
样式操作模块可用于管理DOM元素的样式、坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度、高度,而且可以很方便的区分padding、border、 margin等,主要有六个API,如下: heihgt(size)、width(siz ......

样式操作模块可用于管理dom元素的样式、坐标和尺寸,本节讲解一下尺寸这一块

jquery通过样式操作模块里的尺寸相关的api可以很方便的获取一个元素的宽度、高度,而且可以很方便的区分padding、border、 margin等,主要有六个api,如下:

  • heihgt(size)、width(size)       ;获取第一个匹配元素的高度、宽度,或者通过调用.css(name,value)方法来设置高度、宽度。 size可以是字符串或者数值
  • innerheight()、innerwidth()    ;获取匹配元素集合中第一个元素的高度、宽度,包括内容content、内边距padding。
  • outerheight(m)、outerwidth(m)      ;获取匹配元素集合中第一个元素的高度、宽度,包括内容content、内边距padding,边框border

举个栗子:

 writer by:大沙漠 qq:22969969

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <style>div {width:80px;height:80px;border:10px solid #cf0;background:#333;margin:20px;padding:5px;color:#fff;}</style>
    <div>你好</div>
    <button>测试按钮</button>
    <script>    
        console.log('width:',$('div').width());               //输出:80
        console.log('innerwidth:',$('div').innerwidth());          //输出:90
        console.log('outerwidth:',$('div').outerwidth());             //输出:110
        $('button').click(function(){
            $('div').height(100)
            $('div').width(100)
        })
    </script>
</body>
</html>

我们定义了一个 div和一个按钮,初始化时分别打印包含div的jquery对象的width、innerwidth和outerwidth输出结果,控制台输出如下:

jQuery 源码解析(二十九) 样式操作模块 尺寸详解

渲染如下:

jQuery 源码解析(二十九) 样式操作模块 尺寸详解

 另外我们在按钮上绑定了事件,点击可以设置div的尺寸,点击效果如下:

 jQuery 源码解析(二十九) 样式操作模块 尺寸详解

可以看到,点击按钮后div就变大了,这是因为我们通过width、height设置了参数,修改了它的样式。

 

源码分析


 jquery对heihgt、width、innerheight、innerwidth、outerheight、outerwidth这六个api的实现是通过一个getwh()的工具函数实现的,该函数的定义:getwh(elem,name,extra),参数如下:

  • elem  ;要获取高度、宽度的dom元素
  • name  ;可选字符串,可以是height、width
  • extra  ;指示了计算宽度和高度的公式字符串,可选,可以设置为padding、border和margin。

函数源码如下:

var   csswidth = [ "left", "right" ],
      cssheight = [ "top", "bottom" ];
function getwh( elem, name, extra ) {     //一个工具函数,用于获取元素的高度、宽度,为尺寸方法.width()、.height()、.innerwidth()、innerheight()等提供了基础功能

  // start with offset property
  var val = name === "width" ? elem.offsetwidth : elem.offsetheight,  //如果参数name是width则val是elem元素的宽度,否则val是elem元素的高度  其中包含了内容content、内边距padding、边框border,不包含外边距margin。
    which = name === "width" ? csswidth : cssheight,                  //如果参数name是width则which等于[ "left", "right" ],否则等于[ "top", "bottom" ]
    i = 0,
    len = which.length;

  if ( val > 0 ) {                      //如果元素可见
    if ( extra !== "border" ) {             //参数不是border的情况下,则根据extra值的不同 选择性的加减边框border、内边距padding、外边距margin。
      for ( ; i < len; i++ ) {                  //遍历width数组,分别加减leftpadding、rightpadding等信息
        if ( !extra ) {                             //如果没有传入extra参数,则减去内边距padding。
          val -= parsefloat( jquery.css( elem, "padding" + which[ i ] ) ) || 0;
        }
        if ( extra === "margin" ) {                 //如果参数extra是margin,则加上外边距margin
          val += parsefloat( jquery.css( elem, extra + which[ i ] ) ) || 0;
        } else {                                    //执行到这里则表示extra等于padding
          val -= parsefloat( jquery.css( elem, "border" + which[ i ] + "width" ) ) || 0;
        }
      }
    }

    return val + "px";                      //最后返回val 如果参数是border则返回包含了内容content、内边距padding、边框border的高度,宽度。
  }
  //下面是元素不可见的情况,它会在计算样式或内链样式的基础上,根据参数extra,选择性的加上内边距padding、边框border、外边框margin。有兴趣可以看看
  // fall back to computed then uncomputed css if necessary
  val = curcss( elem, name, name );
  if ( val < 0 || val == null ) {
    val = elem.style[ name ] || 0;
  }
  // normalize "", auto, and prepare for extra
  val = parsefloat( val ) || 0;

  // add padding, border, margin
  if ( extra ) {
    for ( ; i < len; i++ ) {
      val += parsefloat( jquery.css( elem, "padding" + which[ i ] ) ) || 0;
      if ( extra !== "padding" ) {
        val += parsefloat( jquery.css( elem, "border" + which[ i ] + "width" ) ) || 0;
      }
      if ( extra === "margin" ) {
        val += parsefloat( jquery.css( elem, extra + which[ i ] ) ) || 0;
      }
    }
  }

  return val + "px";
}

我们调用width等jquery实例函数时并不是直接调用这个getwh()工具函数的,该函数函数是挂载到jquery.csshooks上的,如下:

jquery.each(["height", "width"], function( i, name ) {
    jquery.csshooks[ name ] = {             //挂载到jquery.csshooks上的
        get: function( elem, computed, extra ) {
            var val;

            if ( computed ) {
                if ( elem.offsetwidth !== 0 ) {             //如果元素可见
                    return getwh( elem, name, extra );          //则调用函数getwh(elem,name,extra获取高度、宽度)
                } else {
                    jquery.swap( elem, cssshow, function() {
                        val = getwh( elem, name, extra );
                    });
                }

                return val;
            }
        },

        set: function( elem, value ) {
            if ( rnumpx.test( value ) ) {
                // ignore negative width and height values #1599
                value = parsefloat( value );

                if ( value >= 0 ) {
                    return value + "px";
                }

            } else {
                return value;
            }
        }
    };
});

当我们调用jquery.css获取一个元素的宽度或高度时(例如调用$.css(div,'width')时,)就会有限调用这个jqueyr.csshooks里的信息,jquery.css里对于csshooks的实现如下:

jquery.extend({
    css: function( elem, name, extra ) {
        var ret, hooks;

        // make sure that we're working with the right name
        name = jquery.camelcase( name );
        hooks = jquery.csshooks[ name ];                    //hooks指向驼峰式样式名对应的修正对象。
        name = jquery.cssprops[ name ] || name;

        // cssfloat needs a special treatment
        if ( name === "cssfloat" ) {
            name = "float";
        }

        // if a hook was provided get the computed value from there
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {    //优先调用hooks对象的里的get()修正方法,这里就是上面定义的对于width、height属性的get方法了
            return ret;

        // otherwise, if a way to get the computed value exists, use that
        } else if ( curcss ) {
            return curcss( elem, name );
        }
    },
    //...
})

了解了getwh()工具函数和通过jquery.css()会执行getwh函数后,再来看下heihgt、width、innerheight、innerwidth、outerheight、outerwidth这六个api的实现,源码如下:

jquery.each([ "height", "width" ], function( i, name ) {        //遍历[ "height", "width" ]

    var type = name.tolowercase();

    // innerheight and innerwidth
    jquery.fn[ "inner" + name ] = function() {                      //在jquery实例上添加innerheight()、innerwidth方法
        var elem = this[0];                                             //获取第一个匹配元素
        return elem ?
            elem.style ?
            parsefloat( jquery.css( elem, type, "padding" ) ) :             //如果匹配元素有style属性,则调用方法jquery.css()获取高度、宽度。第三个参数为padding。
            this[ type ]() :
            null;
    };

    // outerheight and outerwidth
    jquery.fn[ "outer" + name ] = function( margin ) {              //在jquery实例上添加定义outerheight()、outerwidth()方法。
        var elem = this[0];                                             //获取第一个匹配元素
        return elem ?
            elem.style ?
            parsefloat( jquery.css( elem, type, margin ? "margin" : "border" ) ) :  //如果匹配元素有style属性,则调用方法jquery.css()方法,如果传入了margin,则把margin也算进去
            this[ type ]() :
            null;
    };

    jquery.fn[ type ] = function( size ) {                          //在jquery实例上添加height(size)、width(size)方法
        // get window width or height
        var elem = this[0];                                             //获取第一个匹配元素
        if ( !elem ) {
            return size == null ? null : this;
        }

        if ( jquery.isfunction( size ) ) {                              //如果size参数是函数,则遍历匹配元素集合,在每个集合上执行该函数,并取其返回值迭代调用方法.height(size)、.width(size)。
            return this.each(function( i ) {
                var self = jquery( this );
                self[ type ]( size.call( this, i, self[ type ]() ) );
            });
        }

        if ( jquery.iswindow( elem ) ) {                                //如果elem是window对象,则分拿回html或body元素的可见高度clientheight、可见宽度clientwidth。
            // everyone else use document.documentelement or document.body depending on quirks vs standards mode
            // 3rd condition allows nokia support, as it supports the docelem prop but not css1compat
            var docelemprop = elem.document.documentelement[ "client" + name ],
                body = elem.document.body;
            return elem.document.compatmode === "css1compat" && docelemprop ||
                body && body[ "client" + name ] || docelemprop;

        // get document width or height
        } else if ( elem.nodetype === 9 ) {                             //如果匹配的是documet对象,则读取html元素的clientheight/width
            // either scroll[width/height] or offset[width/height], whichever is greater
            return math.max(
                elem.documentelement["client" + name],
                elem.body["scroll" + name], elem.documentelement["scroll" + name],
                elem.body["offset" + name], elem.documentelement["offset" + name]
            );

        // get or set width or height on the element
        } else if ( size === undefined ) {                              //如果未传入size参数
            var orig = jquery.css( elem, type ),                            //调用jquery.css()读取第一个匹配元素计算后的高度、宽度。
                ret = parsefloat( orig );

            return jquery.isnumeric( ret ) ? ret : orig;                    //返回结果

        // set the width or height on the element (default to pixels if value is unitless)
        } else {
            return this.css( type, typeof size === "string" ? size : size + "px" ); //否则调用this.css()设置样式
        }
    };

});

遍历[ "height", "width" ]数组,依次在jquery.fn上挂载属性,内部是通过jquery.css()获取width或height,也就是上面所说的工具函数。