CSSOM View Module 中的尺寸與位置屬性

CSSOM 指 CSS Object Model，即 CSS對象模型。CSSOM 是 JavaScript 操縱 CSS 的一系列 API 集合，它屬是 DOM 和 HTML API 的附屬。

其中視圖模型（View Model）中定義了一系列接口，包括多個關於窗體、文檔和元素的位置尺寸信息，特別容易混淆。

Window 接口

innerWidth/innerHeight

瀏覽器窗口可見區的高寬，包括滾動條。

outerWidth/outerHeight

瀏覽器窗口的外邊沿寬高。

scrollX/scrollY

文檔水平/垂直滾動量。

pageXOffset/pageYOffset

同上。

screenX/screenY

瀏覽器左上角距離屏幕左上角的距離。

Screen 接口

availWidth/availHeight

屏幕可用區域的尺寸。

width/height

屏幕總體尺寸。

Element 接口

clientWidth/clientHeight

元素自己尺寸，包括 padding，但不包括 border、margin 和 scroll。

所以一個設置了 width:100px 的元素出現寬度爲 15px 的覆蓋式滾動條後，它的 clientWidth 爲 85px。

一些瀏覽器的滾動條是半透明的，並容許覆蓋頁面元素，這種情形下，clientWidth 爲 100px。

scrollWidth/scrollHeight

元素的內容區域尺寸，若是有滾動條，則包括隱藏的部分。

這一對值與該元素的後代元素相關。若是後代元素尺寸超過了該元素的大小，無論後代元素是否被隱藏(overflow 或 visibility)，都會計算在內。

clientTop/clientLeft

元素內容與整個元素的位置偏移，理論上包括邊框寬度與滾動條，因爲通常滾動條都位於右下側，所以這一對值基本上就是左側和頂部邊框的值。

scrollTop/scrollLeft

滾動條滾動的位移。

二者都可計算最大值：

maxScrollTop = scrollHeight - clientHeight maxScrollLeft = scrollWidth - clientWidth

計算滾動條寬度的方法，對於瀏覽器最外層滾動條：

window.innerWidth - docment.documentElement.clientWidth

對於普通元素：

offsetWidth - clientWidth - leftBorderWidth - rightBorderWidth

HTMLElement 接口

offsetWidth/offsetHeight

元素自己尺寸，包括 padding、border，但不包括 margin 和 scroll。

即：

offsetWidth = leftBorderWidth + clientWidth + rightBorderWidth offsetHeight = leftBorderWidth + clientHeight + rightBorderWidth

offsetTop/offsetLeft

元素外邊沿(border)與最近一個定位祖先元素內容區（包括 padding 但不包括 border）的距離。

---

圖例

如上圖，假設黑色框表明瀏覽器，DOM結構爲：

<div class="container">
        <div class="content">
            <article>
            </article>
        </div>
    </div>

樣式設定爲：

html
body {
    margin: 0;
    padding: 0;
}
.container {
    width: 300px;
    height: 300px;
    overflow: scroll;
    border: 10px solid #ddd;
    margin: 80px;
    position: relative;
    padding: 88px;
}
.content {
    width: 500px;
    height: 500px;
    background: #ccc;
    padding: 60px;
    margin: 75px;
    border: 20px solid #785645
}
article {
    width: 1000px;
    background: #ff0;
}

咱們來看一下 .container 與 .content 這兩個元素的各類尺寸與位置值。

.content

屬性	值	說明
scrollWidth	1060px	後代元素 article 寬度 1000px 超過了 .content 寬 500px，所以實際上 .content 的內容寬度爲 1000px(article) + 60px(leftPadding)；若是 article 沒有溢出，則爲 500px(.content) + 60px(leftPadding) + 60px(rightPadding)
scrollHeight	620px	後代元素未溢出，所以 .content 內容高度爲 500px(height) + 60px(paddingTop) + 60px(paddingBottom)
clientWidth	620px	500px(width) + 60px(leftPadding) + 60px(rightPadding)
clientHeight	620px	500px(width) + 60px(leftPadding) + 60px(rightPadding)
offsetWidth	660px	clientWidth + 20px(leftBorderWidth) + 20px(rightBorderWidth)
offsetHeight	660px	clientHeight + 20px(leftBorderWidth) + 20px(rightBorderWidth)
clientTop	20px	上邊框寬度
clientLeft	20px	左邊框寬度
offsetTop	163px	88px(.container paddingTop) + 75px(.content marginTop)
offsetLeft	163px	88px(.container paddingleft) + 75px(.content marginleft)
scrollTop	0	沒有滾動條
scrollLeft	0	沒有滾動條

.container

屬性	值	說明
scrollWidth	1243px	1060px(.content scrollWidth) + 20px(.content leftBorderWidth) + 75px(.content leftMargin) + 88px(.container leftPadding)，注意即便 .content 的後代 article 內容沒有溢出，.container 的 scrollWidth 也是 660px(.content scrollWidth) + 75px(.content leftMargin) + 88px(.container leftPadding)，右側的內外邊距並不增長，見這裏
scrollHeight	986px	620px(.content scrollWidth) + 20px(.content topBorderWidth) + 20px(.content bottomBorderWidth) + 75px(.content topMargin) + 88px(.container leftPadding)
clientWidth	476px-滾動條寬度	內容區寬度 + padding，去除滾動條
clientHeight	476px-滾動條寬度	內容區高度 + padding，去除滾動條
offsetWidth	496px	300px + 88px × 2 + 20px × 2
offsetHeight	496px	300px + 88px × 2 + 20px × 2
clientTop	10px	上邊框寬度
clientLeft	10px	左邊框寬度
offsetTop	80px	最近一個定位元素是body，取 topMargin
offsetLeft	80px	最近一個定位元素是body，取 leftMargin
scrollTop	不定	取決於滾動位置，最大值爲 scrollHeight - clientHeight
scrollLeft	不定	取決於滾動位置，最大值爲 scrollWidth - clientWidth

詳見這裏。

在 CSSOM 草案出臺以前，許多瀏覽器就已經支持其中至關一部分，CSSOM 的目的是規範這些取值，能夠看到其中有些量的意義是相同的，好比 scrollX/pageXOffset、scrollY/pageYOffset。另外：

window.scrollX = document.body.scrollLeft = window.pageXOffset window.scrollY = document.body.scrollTop = window.pageYOffset