offsetWidth、offsetHeight、clientWidth、clientHeight对比总结

offsetWidth // 返回元素的宽度（包括元素宽度、内边距、边框，不包括外边距）

offsetHeight // 返回元素的高度（包括元素高度、内边距、边框，不包括外边距）

clientWidth // 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight // 返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

style.width // 返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

style.height // 返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth // 返回元素的宽度（包括元素宽度、内边距、溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh // 返回元素的高度（包括元素高度、内边距、溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；

2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性

3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

参考

https://www.cnblogs.com/mycognos/p/9131180.html