Is it possible to get the width of a shape including the border and the padding? When I used the getElementProperty it seemed to ignore all the “elements” and just gave me the inner area. I then tried to grab the border and padding separately using getPropertyValue, but that wasn’t working either. Does anyone know a work around apart from hardcoding it in?
(Edit)
For example, let’s say I have a square, of width 10px and a border of 2px on all sides, with the id of ‘square’.
var X = hypeDocument.getElementProperty(square, 'width');
alert(X);
var x = hypeDocument.getElementById("square").style.borderWidth;
console.log(x);
to get the total width…
var y = parseInt(hypeDocument.getElementProperty(square, 'width'));
var x = parseInt(hypeDocument.getElementById("square").style.borderWidth);
var z = y + x + x; //assuming all borders are the same width
console.log(z);
Actually using offsetWidth and offsetHeight will return the elements dimensions including padding, border and scrollbars if any.
So,
var x = hypeDocument.getElementById("square").offsetWidth;
alert(x); // will return the elements total occupied space
Just an FYI for @gasspence and anyone else. If you were wondering and didn’t know.
element.clientWidth; // includes padding but not border
element.scrollWidth; // gets the dimensions of an object inside it's containing scrollable element
In the example of using “scrollWidth”, just to clarify. An element could be 600px by 400px but housed in an element 200px by 200px that has contents scrollable. The “scrollWidth” would return 600.