首先我们弄出来俩个div，分别加上样式：

<DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 300px;
        height: 300px;
        margin: 30px;
        padding: 10px;
        border: 4px solid;
        background: yellow;
        position: relative;
    }
    .inner{
        width: 140px;
        height: 140px;
        padding: 10px;
        border:2px solid;
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrap" style="width:300px;height:300px;">
        <div class="inner" style="width:140px;height:140px;"></div>
    </div>
</body>
</html>

获取元素、浏览器、屏幕分辨率宽度，高度，坐标的方法及其区别_JS
然后在js里面获取到这俩个div

var ins = document.getElementsByClassName("inner")[0],
    wrap = document.getElementsByClassName("wrap")[0];

下面开始获取元素的宽度和高度

1.offsetWidth,offsetHeight方法计算宽度和高度的时候包含border跟padding的距离。

var iwidth = ins.offsetWidth,
    iHeight = ins.offsetHeight,
    wWidth = wrap.offsetWidth,
    wHeight = wrap.offsetHeight;

2.clientWidth，clientHeight方法计算时包含padding不包含border；（不包括滚动条的宽高）

var iWidth = ins.clientWidth,
    iHeight = ins.clientHeight,
    wWidth = wrap.clientWidth,
    wHeight = wrap.clientHeight;

3.NODE.style.width,NODE.style.height获取样式的宽高，获取到的宽高不包括padding和border。

var iwidth = ins.style.width,
    iheight = ins.style.height,
    wwidth = wrap.style.width,
    wheight = wrap.style.height;

获取元素的距其offsetParent元素的顶部/左侧间距：

//获取元素X,Y轴坐标位置
var insOffLeft = ins.offsetLeft,
    insOffTop = ins.offsetTop,
    wrapOffLLeft = wrap.offsetLeft,
    wrapOffTop = wrap.offsetTop;

获取元素有定位的最近的父元素:

如果一直找到body都没有有定位的父元素，那么返回的就是body。如果有很多有定位的父元素，那么就近优先。

var insParent = ins.offsetParent,
	wrapParent = wrap.offsetParent;

获取元素的左边框和上边框宽度：

var insBorderLeft = ins.clientLeft,
	insBorderTop = ins.clientTop,
	wrapBorderLeft = wrap.clientLeft,
	wrapBorderTop = wrap.clientTop;

获取浏览器宽度高度的方法：

var llw = document.documentElement.clientWidth,
	llh = document.document.clientHeight;

获取页面的宽高：

var docWidth = document.documentElement.scrollWidth,
	docHeight = document.documentElement.scrollHeight;

获取屏幕分辨率的宽，高：

var screenH = window.screen.height,
	screenW = window.screen.width;

获取窗口的宽高：

window.innerWidth
window.innerHeight
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight