容器尺寸 Web/API

• MDN
• element.clientWidth, HTMLElement.offsetWidth, window.innerWidth 区别

Element (clien / scroll-)

Element（元素）接口是 Document 的一个對象 (Object)。 它描述了所有同类元素，所普遍具有的「方法」和「属性」。

这些「继承」自 Element，并且增加了一些「额外功能」的接口，描述了更具体的行为。 例如, HTMLElement 接口是所有 HTML 元素的基础接口； 而 SVGElement 接口是所有 SVG 元素的基本接口。

在 web 以外的语言，像 XUL，通过 XULElement 的 API，也能实现它。

Element.clientWidth

• 此 clien 是指元素內部 (px)
  • 含 padding；不含 scrollbar、border、margin。

Element.clientLeft

• 元素 left 結構寬度，唯讀。
  • 含 border、scrollbar；不含 padding、margin。

Element.scrollHeight

• 元素内容內部 (px)。
  • 含 padding；不含 border 和 margin。
  • 若有溢出的不可見內容，没有 scrollbar 的情况下，scrollHeight 值 clientHeight 相同 (含 scrollbar? )。
  • scrollHeight 也包括伪元素 e.g. ::before 和 ::after。
• 若要取得小数值，需使用 Element.getBoundingClientRect().

Element.scrollLeft

• 读取 / 设置元素 scrollbar 起點移動量。
• 若元素是 direction: rtl，
  • scrollbar 起點是右侧、scrollLeft 值为 0；當增加偏移量，是增加負值
  • (chrome 起點值是最大可偏移量，當增加偏移量，是減少 scrollLeft 數值)。

HTMLElement (offset-)

HTMLElement 接口表示所有的 HTML 元素。

HTMLElement.offsetWidth

• 唯讀，返回元素的布局宽度， 含 CSS 設置的 width、border、padding、scrollbar。
• 各浏览器的 offsetWidth 可能有所不同。

HTMLElement.offsetTop

• 当前元素與其 offsetParent 元素的 top 偏移量。

HTMLElement.offsetParent

• 會回傳一個 "參考物件"，是最接近自己的、能供自己做定位參考的母層容器。
• 如果都没有可供定位參考的元素，则 offsetParent 为最近的 table 或 table cell 或「根元素（标准模式下为 html；quirks 模式下为 body）」。
• 当元素的 style.display 设置为 " none " 时，offsetParent 返回 null。 offsetParent 很有用，因为 offsetTop 和 offsetLeft 都相對其 padding。

Window (inner- / outer- / page-Y- / scroll-Y)

window 物件代表了一個包含 DOM 文件的視窗， 其中的 document 屬性指向了視窗中載入的 Document 物件。 而使用 document 的 defaultView 屬性， 則可取得該 Document 物件所在的視窗 window 物件。

window.innerWidth

• 浏览器視窗的视口（viewport）宽度 (px)，如果存在 scrollbar，则包括它。 innerWidth 属性被任一 window 物件支持，如 window、frame、frameset 或 secondary window。

window.outerHeight

• 唯讀，获取整个浏览器窗口的高度 (px)，包括侧边栏（如果有）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

window.pageYOffset、window.scrollY

• 唯讀，这是 window.scrollY 的别名，返回文档在垂直方向「已滚动的像素值」。
• 在現代瀏覽器中可取得子像素，不一定是整數。

window.parent

• 返回当前窗口的父窗口对象。
• 如果一个窗口没有父窗口,则它的 parent 属性为自己。
• 如果当前窗口是一个 <iframe>、<object>、或者 <frame>，则它的父窗口是嵌入它的那个窗口。