带有设置参数的jQuery outerWidth？答案

【问题标题】：jQuery outerWidth with set argument?带有设置参数的jQuery outerWidth？
【发布时间】：2013-12-09 21:55:35
【问题描述】：

因为我也遇到了problem with jQuery's autocomplete 不正确的宽度 -

我看到了这段代码：

_resizeMenu: function() {
    var ul = this.menu.element;
    ul.outerWidth( Math.max(    //<------
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
}

但是 AFAIK ，outerWidth 不采用 bool 参数以外的参数来指示边距。

我不认为他们这样做只是为了获得真实、虚假的价值，因为他们不需要 MAth.max 来做到这一点。他们可以使用||。

我错过了什么？

【问题讨论】：

标签： jquery

【解决方案1】：

查看jQuery的源码：

// Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods
jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
    jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, function( defaultExtra, funcName ) {
        // margin is only for outerHeight, outerWidth
        jQuery.fn[ funcName ] = function( margin, value ) {
            var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
                extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );

            return jQuery.access( this, function( elem, type, value ) {
                var doc;

                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
                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 ]
                    );
                }

                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 );
        };
    });
});

如您所见，innerHeight、innerWidth、height、width、outerHeight 和outerWidth 都是使用参数margin 和value 创建的。

由于第一个参数不是布尔值 (typeof margin !== "boolean")，chainable 将为真，这反过来意味着在调用 jQuery.acess (chainable ? margin : undefined) 时将使用边距参数作为值。

这意味着它将调用jQuery.style( elem, type, value, extra )，其中type 是“宽度”，value 是Math.max 的结果，extra 将是“边框”。

通过调试jquery-1.10.2.js#9746@http://jsfiddle.net/95b7K/亲眼看看发生了什么

【讨论】：

你是说有一个没有记录的过载？
是的，它看起来像。 jQuery.style 似乎也没有记录。顺便说一句，使用参数调用width 的唯一区别似乎是extra 设置为“内容”。