總結 DOM、BOM API 中的尺寸與佈局相關屬性和方法
阿新 • • 發佈：2022-11-29
簡介
本文根據 MDN 上 DOM、BOM API 中與尺寸和佈局相關屬性和方法的說明，總結成表，方便快速查詢。
物件層級
- 螢幕(screen)
- 物理裝置(device)
- 螢幕可用區域(avai)
- 瀏覽器視窗(window)
- 視口(viewport)
- 文件節點(documentElement) 以及 body 節點
- 更多子節點(Element)
圖示
screen
screen.width vs screen.availWidth 下圖中 screen.height 與 screen.availHeight 相等，因此省略
window
viewport
document
使用者代理可能帶有預設的 margin 和 padding，此時，document 和 body 節點的尺寸可能並不等於 viewport。因此，需要先重置其內外邊距。
Element
完整圖示：
offset 區域（border-box）
client 區域（padding-box）