Getting entire object width

Using JavaScript with Hype
1

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);

This would alert 6 as opposed to 10.

2

this will get you the border width…

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);
1 Like
3

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.

3 Likes
4

Thank you both so much, having to hard code the values in was killing me.

1 Like