- clientWidth: width(内容宽度) + 左右padding - 滚动条宽度;
- offsetWidth: width(内容宽度) + 左右padding + 左右border宽度;
- scrollWidth: width(内容宽度) + 左右padding + 不加左右border宽度 + 而是加溢出的宽度;
<style>
.wrapper {
width: 650px;
height: 100px;
border: 10px solid green;
overflow: auto;
}
.wrapper .cell {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid black;
margin-right: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
</style>
<div class="wrapper">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>
let wrapper = document.querySelector('.wrapper')
console.log(wrapper.offsetWidth); // 670
console.log(wrapper.clientWidth); // 650
console.log(wrapper.scrollWidth); // 650
clientWidth
width(内容宽度) + 左右padding - (如超出父级宽高会出现滚动条，需减去滚动条宽);
width 650px + 左右padding 0px - 滚动条宽 = clientWidth可视宽度 635px
offsetWidth
width(内容宽度) + 左右padding + 左右border宽度; (即使出现滚动条，也已包含滚动条的宽度)
width 650px + 左右padding 0px + 左右border 10px = 670px
scrollWidth:
width(内容宽度) + 左右padding + 不加左右border宽度 + 而是加溢出的宽度;
(也就是整个子元素占据的宽度 + 子元素margin宽度 = 父元素.scrollWidth)
-
下图是用scrollHeight举例；计算方式同理；
(子元素cell高度100px + cell的下边距20px ) * 2 = wrapper.scrollHeight 240px
