I've written a plugin to override the default outerWidth and outerHeight functions so they can be used to set the outerWidth and outerHeight of an element.

I constantly found myself calculating the width and height of an element in order to achieve a desired outer width & outer height. This plugin allows me to specify my desired outer width and it takes care of deducting the border and padding from the width value that actually gets set.

I feel this feature is useful enough to warrant inclusion in the core library, what do you reckon?

My plugin is as follows...

/**
* jQuery.setouter - Set the outer sizes of elements
* Written by Adam Pritchard
* Date: 2010/11/05 (remember, remember...)
* 
* This plugin overrides the default outerWidth and outerHeight functions
*
* @author Adam Pritchard
* @version 0.1
*
**/

(function ($) {

    if ($) {
        // get references to original functions
        var outerWidth = $.fn.outerWidth;
        var outerHeight = $.fn.outerHeight;

        var workerFunc = function (height, value) {
            var border = this.border();
            var padding = this.padding();
            var actualSize;
            if (height) {
                actualSize = value - border.top - padding.top - padding.bottom - border.bottom;
                return this.height(actualSize);
            } else {
                actualSize = value - border.left - padding.left - padding.right - border.right;
                return this.width(actualSize);
            }
        };

        $.fn.extend({
            outerWidth: function (value) {
                if (typeof (value) != "undefined" && value === value * 1.0) {
                    return workerFunc.apply(this, [false, value]);
                } else {
                    // pass onto original function
                    return outerWidth.apply(this, arguments);
                }
            },

            outerHeight: function (value) {
                if (typeof (value) != "undefined" && value === value * 1.0) {
                    return workerFunc.apply(this, [true, value]);
                } else {
                    // pass onto original function
                    return outerHeight.apply(this, arguments);
                }
            }
        });
    }

})(jQuery);