原生js获取元素的宽高

<div id="box"></div>
#box{
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    height:60px;
}
//获取盒子的内容高度，内容高度也可用用box.clientHeight获取，内容高度不包括边框和外边距和滚动条
var box = document.getElementById("box")
var contentHeight = window.getComputedStyle(box).height //输出 '60px'

//获取盒子客户端的高度
box.clientHeight //输出110 (内容高度+padding * 2)

//获取盒子自身实际高度
box.offsetHeight //输出160 (内容高度 + 内边距*2 +边框*2)

 

//如果box的父容器没有设置定位，则box.offsetLeft是相对body而言，否则是根据离它最近且有设置定位的父容器而言
box.offsetLeft //获取box盒子相对它的父容器水平的偏移
box.offsetTop //获取box盒子相对它的父容器垂直的偏移

//当一个容器设置高度，如果该容器有滚动条，则该容器的内容高度要减去滚动条的高度,滚动条的高度一般为17px