demo
#demo {
width: 100px;
height: 200px;
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
hello
var div = document.getElementById('demo');
console.log(div.offsetHeight); // 224
console.log(div.clientHeight); // 220
可以看出
offsetHeight = height + padding * 2 + border * 2
clientHeight = height +padding * 2
可以看出来offsetHeight包括元素的内容+内边距+边框，而clientHeight的值等于元素的内容+内边框。
那我们怎么获取元素的本身高度呢？
1.直接利用style？
但是console.log(div.style.height) // ''
打印出来为空，这是因为style属性只能通过元素标签style属性里面的值来获取。
这里的div什么都没有，style也没有，当然输出为空了。
#demo {
width: 100px;
/*height: 200px;*/
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
hello
要是把内部样式表中的height注释掉，将高度添加到style中，
console.log(div.style.height) // 200px
这样就能完美的获取到高度了。
显然这样每次都添加到内联样式是不理想的，那有没有更好的办法呢？
2.getComputedStyle
getComputedStyle()方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码，也会把八辈祖宗
给显示出来)
这样就不用麻烦的再去添加内联样式了。
另外，getConputedStyle是只读的，但是style是可读可写的，搭配他俩就可以动态设置元素高度。
只需要一行代码
window.getComputedStyle(div);
就可以获得一大堆属性值。
但是只想要某个属性值的话怎么办？让getPropertyValue(可以获得CSS样式申明对象的属性值)来帮忙。
console.log(window.getComputedStyle().getProperttValue('height')); //200px
成功获取元素高度。
怎么获取元素属性值的变化呢
ResizeObserver 允许我们观察DOM元素的内容矩形大小(宽度、高度)的变化，并做出相应的响应。它就像给元素添加 document.onresize() 或 window.resize() 事件(但在JavaScript中，只有 window 才有 resize 事件)。当元素改变大小而不调整视窗大小时，它是有用的。 下面描述一些调整观察者的行为：
当观察到的元素被插入或从DOM中删除时，观察将会触发
当观察到的元素 display 值为 none 时，观察都会触发
观察不会对未替换的内联元素(non-replaced inline element)触发
观察不会由CSS的 transform 触发
如果元素有显示，而且元素大小不是 0,0 ，观察将会触发
使用Resize Observe，只需要实例化一个新的ResizeObserve对象并传入一个回调函数，该函数接收观察到的条目
const myObserver = new ResizeObserver(entries => {
// 遍历条目，做一些事情
});
然后我们在实例化对象上调用observe并传入一个元素来观察
const someEl = document.querySelector('.some-element');
const someOtherEl = document.querySelector('.some-other-element');
myObserver.observe(someEl);
myObserver.observe(someOtherEl);
对于每个entry，我们都会得到一个包含contentRect和一个target属性的对象。
target是DOM元素本身，contentRect是具有以下属性的对象：width，height，
x，y，top，right，bottom和left。
contentRectde width和height值不包括padding。contentRect.top是元素顶部的padding
contentRect.left是元素左侧padding
比如要打印出被监听元素寸尺变化时width和height的值，可以像下面这样做:
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log('width', entry.contentRect.width);
console.log('height', entry.contentRect.height);
});
});
const someEl = document.querySelector('.some-element');
myObserver.observe(someEl);
