總結
- 容器元素的 clientWidth 小於 scrollWidth 時，在容器元素上會出現滾動條。
- 容器元素的 scrollWidth 等於內部元素的 clientWidth
- 由於 clientWidth 不包含滾動條，所以當滾動條已存在時。即使容器的寬度能完全展示內部元素，滾動條依然會存在。即只有當內部元素的寬度 = 容器 clientWidth + 滾動條寬度時滾動條才消失。
Element
- Element 是一個通用性非常強的基類，所有 Document 對象下的對象都繼承自它。這個接口描述了所有相同種類的元素所普遍具有的方法和屬性。一些接口繼承自 Element 並且增加了一些額外功能的接口描述了具體的行為。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基礎。
- clientWidth 表示該元素內部的寬度
- 該屬性包括內邊距，但不包括垂直滾動條（如果有）、邊框和外邊距。
- 該屬性值會被四舍五入為一個整數。如果你需要一個小數值，可使用
element.getBoundingClientRect()
- scrollWidth 表示元素的滾動視圖寬度
- 包括由於overflow溢出而在屏幕上不可見的內容。
- 它包含元素的內邊距，但不包括邊框，外邊距或垂直滾動條（如果存在）
- 包括偽元素的寬度，例如::before或::after
- 這個屬性會進行四舍五入並返回整數，如果你需要小數形式的值，使用
element.getBoundingClientRect().
- 如果元素的內容可以適合而不需要水平滾動條，則其scrollWidth等於clientWidth
HTMLElement
- HTMLElement 接口表示所有的 HTML 元素。
- offsetWidth 元素自身可視寬度加上左右border的寬度
- 各瀏覽器的offsetWidth可能有所不同
- offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設置的寬度(width)的值。
- 這個屬性將會 round(四舍五入)為一個整數。如果你想要一個fractional(小數)值,請使用
element.getBoundingClientRect().