Request: innerWidth/Height option for CSS size
When *applying* dimensions to an object, the padding and borders must
be accounted for. For example, if you set "width: 100px", the
outerWidth will be 122px if margins are 10px and borders are 1px. It
would be logical and useful if innerWidth could calculate this 22px
difference. Here is a sample of how this could be used:
var $Elem = $("#myDiv");
var outerWidth = #Elem.outerWidth();
var innerWidth = #Elem.innerWidth( true ); // pass CSS option
// outer - inner = difference based on box-model
var innerOuterDiff = outerWidth - innerWidth;
var newOuterWidth = 200; // TARGET width of elem
var cssWidth = newOuterWidth - innerOuterDiff; // simple calc
$Elem,css({ width: cssWidth }); // results in 200px outerWidth
This greatly simplifies calculating a 'css width' that will result in
a predictable outerWidth. Ditto for height. This is pretty basic
stuff.
An alternative would be a new set of methods called cssWidth and
cssHeight, but using innerWidth/Height seems more intutive, and would
avoid duplicating code.
I have custom cssWidth methods in my plug-ins to handle this. But
since the jQuery core *already* calculates the necessary values
(borders & margins), it seems redundant that I need to redo it myself.
Thoughts?