Consider de following markup:
<div id="outerElement">
<div id="innerElement" style="border: 1px solid blue; background-color: #f0f3f5; margin-top: 100px">
TESTE
</div>
</div>
I want to get the actual final height of outerElement
using javascript. I noticed that if I remove the vertical margins from innerElement
I am able to get what I want but I cannot alter styles from within the outerElement
.
How do I do this?
Obs:
I already tried height, scrollheight and offsetHeight in all browsers. Chrome gives me the expected value (including inner element's margins) for scrollHeight
. All other browsers fail.
The HTMLElement. offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer. Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
Method 1: Using the offsetHeight property: The offsetHeight property of an element is a read-only property and used to return the height of an element in pixels. It includes any borders or padding of the element. This property can be used to find the height of the <div> element.
var height = document. getElementById('content'). clientHeight; That will not include any borders or scrollbars in the element, just padding.
I'd use jQuery. Try using
$("#myelementId").height()
And see if that does it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With