DOM 元素尺寸詳解：offsetWidth、clientWidth、scrollWidth 等

核心尺寸屬性對比

以一個 div 為例：width:200px, padding:50px, border:50px, 內容高度:400px, 滾動條寬度:17px。

1. offsetWidth / offsetHeight

含義：元素佔據的總寬高，包含 border + padding + width/height。
公式：offsetWidth = border-left + padding-left + width + padding-right + border-right
示例：50+50+200+50+50 = 400

2. clientWidth / clientHeight

含義：內容區寬高 + padding，**不包含滾動條、邊框**。
公式：clientWidth = padding-left + width + padding-right - vertical-scrollbar-width
示例：50+200+50-17 = 283
注意：jQuery innerWidth() 不扣除滾動條，結果為 300。

3. scrollWidth / scrollHeight

含義：包含內容完整尺寸（含被滾動隱藏部分）+ padding，**不包含邊框、滾動條**。
公式：scrollWidth = padding-left + max(content-width, width) + padding-right
示例：50+402+50 = 502（內容實際高度 402）

4. scrollTop / scrollLeft

含義：已滾動的距離。
關係：scrollTop = scrollHeight - clientHeight（當滾動到底部時）。

總結表

實戰提示

• 獲取元素可視區尺寸：clientWidth/Height。
• 獲取元素完整佔位尺寸：offsetWidth/Height。
• 判斷是否滾動到底：scrollTop + clientHeight >= scrollHeight。
• jQuery .width() = clientWidth，.innerWidth() = clientWidth + padding，.outerWidth() = offsetWidth。