原生js获取元素宽高
<div id="box"></div>
1
#box{
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
height:60px;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//获取盒子的内容高度，内容高度也可用用box.clientHeight获取，内容高度不包括边框和外边距和滚动条
var box = document.getElementById("box")
var contentHeight = window.getComputedStyle(box).height //输出 '60px'
//获取盒子客户端的高度
box.clientHeight //输出110 (内容高度+padding * 2)
//获取盒子自身实际高度
box.offsetHeight //输出160 (内容高度 + 内边距*2 +边框*2)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9