JS怎么获取一个高度单位为rem的元素的真实高度？

Question

好比如：
html:

<div id="act_header">
        <header class="enter-header">
            <h5>活动汇</h5>
        </header>
        <ul class="hide enter-ul" id="Tag">
            <li class="addColor" onclick="btn_list(this)">全部活动</li>
            <li onclick="btn_list(this)">已报名</li>
        </ul>
    </div>

css:

html{
    font-size:100px;
}
#act_header{
    padding:1.38rem 0;
}

如何计算这个act_header的高度？
自己看到有这个jq写的https://segmentfault.com/q/10...
想要的是原生js写的，在此先谢过。。。

Answer 1

    const p = document.getElementsByTagName('p')[0];
    console.log(p.offsetHeight+p.offsetTop);

如果p元素上面还有其他元素的话 需要用p.offsetTop - (other.offsetTop + ohter.offsetHeight) 来得出margin-top的距离

Answer 2

大概的步骤就是

• 获取单元rem值为多少

• 计算出height 高度

参考代码 demo

https://jsfiddle.net/wesleyCh...