When starting with the
gwt-floating-header project i ran into some problems with getting, what i call, the" true width" of an element in javascript. With "true width" i mean the width of the element excluding padding, border and margin. And because i'm writing for GWT I don't have luxury of be able to use the
.width() function in jQuery.
It took me a while to get the script to this point and i'm not really sure if it works for all browsers but it might help someone to get started.
function width(element) {
var style = element.currentStyle || element.ownerDocument.defaultView.getComputedStyle(element, null);
var safe = function(v) { return parseInt(v, 10) || 0; };
return element.offsetWidth - safe(style.paddingLeft)
- safe(style.paddingRight) - safe(style.borderLeftWidth)
- safe(style.borderRightWidth);
}
GWT version of this snippet can be found
here. Please let me know if you find any strangeness or incompatibilities in the code.
EDIT: It seems that margin shouldn't be in the calculation.