JS 中的 offsetWidth、clientWidth、scrollWidth、innerWidth、outerWidth 区别

*注：offsetWidth和clientWidth由于盒模型的不同，导致计算结果有所差异。

         本文将讨论 box-sizing: content-box; 与 box-sizing: border-box; 两种场景下的计算情况。

         若读者不清楚这两种盒模型的差异，请自行查看 box-sizing

 

一、offsetWidth 和 offsetHeight

1. box-sizing: content-box; 

• offsetWidth：width + 左右padding + 左右border（内容宽度+左右内边距+左右边框宽度）
• offsetHeight：height + 上下padding + 上下border（内容高度+上下内边距+上下边框宽度）

2. box-sizing: border-box;

• offsetWidth：width（内容宽度，此时的内容宽度已经包含边框和内边距）
• offsetHeight: height（内容高度，此时的内容高度已经包含边框和内边距）

二、clientWidth 和 clientHeight

1. box-sizing: content-box; 

• clientWidth：width + 左右padding（内容宽度+左右内边距）
• clientHeight：height + 上下padding（内容高度+上下内边距）

2. box-sizing: border-box;

• clientWidth：width - 左右border（内容宽度-左右边框）
• clientHeight：height - 上下border（内容高度-上下边框）

三、scrollWidth 和 scrollHeight

• scrollWidth：可视区域宽度+滚动条宽度
• scrollHeight：可视区域高度+滚动条高度

四、innerWidth 和 outerWidth

• innerWidth：窗口可视区域宽度
• outerWidth：整个窗口宽度，包括可视区域和工具栏