JS — get width, height of an element

• el.offsetHeight — Get the height and width of a <div> element, including padding and border:
• el.clientHeight — return the viewable height and width of an element, only including the padding.
• getBoundingClientRect() — returns the size of an element and its position relative to the viewport. — left, top, right, bottom, x, y, width, height.(including width + padding + border)

el.getBoundingClientRect().height
<div id="myDiv" style="width:250px; height:150px; padding:3px; border:5px solid red;">
//width:266px

• window.window.getComputedStyle(element, pseudoElement)—gets all the actual (computed) CSS property and values of the specified element.

The CSS property values may be accessed using the getPropertyValue(propName) API or by indexing directly into the object such as cs[' z-index'] or cs.zIndex.

const style = window.getComputedStyle(el), 
margin = style['margin-' + side]
or
marginTop = getPropertyValue('margin-top')

#reference

HTML DOM offsetHeight Property

https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

Getting width and height of an element

https://stackoverflow.com/questions/10787782/full-height-of-a-html-element-div-including-border-padding-and-margin