Width of an element in javascript

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.

Comments

Popular posts from this blog

Cubing for charity #4

jQuery floating table header plugin

Seascape - OpenVR adaptation of a 4k intro