margin을 포함한 HtmlElement height 구하기

function getElementHeight(node: Element) {
    const list = [
        'margin-top',
        'margin-bottom',
        'border-top',
        'border-bottom',
        'padding-top',
        'padding-bottom',
        'height'
    ]

    const style = window.getComputedStyle(node)
    return list
        .map(k => parseInt(style.getPropertyValue(k), 10))
        .reduce((prev, cur) => prev + cur)
}

margin이 포함된 element height을 구하는 방법은 두 가지다
1. margin이 포함된 element를 div로 감싸고 감싼 div의 offsetHeight을 가져온다
2. 위와 같은 유틸함수를 만들어서 margin을 포함한 height을 구한다

참고

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