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.
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.
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