原生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