如果您是網(wǎng)站建設(shè)工程師，您可能對(duì)文檔對(duì)象模型和CSS對(duì)象模型腳本編寫(xiě)。除了DOM和CSSOM規(guī)范定義的接口之外，CSSOM視圖模塊中還指定了方法和屬性的子集，提供了用于確定和操作DOM元素幾何的API，以便在網(wǎng)站上呈現(xiàn)有趣的用戶界面。

用戶界面解決方案，如無(wú)限滾動(dòng)、滾動(dòng)元素動(dòng)畫(huà)，甚至流行的拖放，都是有趣的界面解決方案，已經(jīng)存在一段時(shí)間了。CSS對(duì)象模型(CSSOM)是一組API，允許從JavaScript進(jìn)行CSS操作。就像DOM提供操作HTML的接口一樣，CSSOM允許作者讀取和操作CSS。

CSSOM視圖是CSS的一個(gè)模塊，它包含許多屬性和方法，所有這些屬性和方法都捆綁在一起，為作者提供了一個(gè)單獨(dú)的接口，用于獲取有關(guān)元素的可視視圖的信息。此模塊中的屬性主要是只讀的，并且在每次訪問(wèn)它們時(shí)都會(huì)進(jìn)行計(jì)算，即實(shí)時(shí)值。目前CSSOM視圖模塊只是一個(gè)工作草案并在修訂中W3C的規(guī)格表.因此，它的本質(zhì)是以一種可以跨瀏覽器兼容的方式定義這些接口，包括現(xiàn)有的和新的。有幾個(gè)原因可以解釋和使用CSSOM視圖屬性和方法。

首先，日常用戶界面并不需要可移動(dòng)的組件來(lái)實(shí)現(xiàn)其最基本的用戶故事。除非你正在構(gòu)建一個(gè)游戲界面，否則你可能并不總是需要在你的網(wǎng)站上制作可移動(dòng)的東西。盡管如此，幾何屬性還是有用的，因?yàn)橐跃幊谭绞讲倏vDOM元素的可視視圖的能力為開(kāi)發(fā)人員實(shí)現(xiàn)動(dòng)態(tài)用戶界面提供了更多的超能力。實(shí)施看板是因?yàn)榻M件可以被拖放到相關(guān)的部分。因?yàn)闈L動(dòng)位置值是可讀的，所以當(dāng)用戶滾動(dòng)到文檔底部時(shí)，會(huì)加載更多的內(nèi)容。因此，雖然看起來(lái)不是很明顯，但是通過(guò)了解元素的精確大小和位置信息，這些特性是可以實(shí)現(xiàn)的。

第二，當(dāng)在web瀏覽器中查看HTML文檔時(shí)，DOM元素以可視形狀呈現(xiàn)，因此它們具有相應(yīng)的可視表示，可由瀏覽器查看/可視化。通過(guò)CSSOM視圖屬性和方法訪問(wèn)這些DOM元素的實(shí)時(shí)可視屬性比常規(guī)的CSS屬性更有優(yōu)勢(shì)。然后你問(wèn)如何:在CSS中設(shè)置HTML元素的寬度和高度屬性后，CSS box-sizing屬性最終設(shè)置如何計(jì)算元素的總寬度和高度。如果盒子大小的值發(fā)生變化，這會(huì)產(chǎn)生一個(gè)容易出錯(cuò)的JavaScript。其次幾乎沒(méi)有任何方法可以讀取設(shè)置為auto的元素寬度的精確數(shù)值。有時(shí)，我們需要精確的像素寬度和尺寸。

最后，擁有一組只讀的生命值看起來(lái)更加靈活和有用，當(dāng)編寫(xiě)一些其他代碼來(lái)根據(jù)當(dāng)前的生命值操作元素時(shí)，可以依賴這些值。