可以看出 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; }
显然这样每次都添加到内联样式是不理想的，那有没有更好的办法呢？ 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);
