在平時的工作當中，我們在操作dom的樣式的時候，其實操作的就是css的物件模型cssOM，其實在16年的時候，就釋出了一組新的物件模型cssTypeOM，這是一個全新的操作css樣式的方式，它的好處有很多，我們一一列舉。

在講解cssOM和cssTypeOM的區別的同時，我們要了解瀏覽器是如何渲染檢視的：

1、解析html後構建dom物件

2、解析css後構建cssOM物件

3、瀏覽器將dom與css組成渲染樹

4、最終瀏覽器渲染到檢視中

cssOM

var width = 100;

document.body.style.width = width + "px";

//需要修改時

document.body.style.width = (width + n(要改變的值)) + "px";

複製程式碼

這就是cssOM目前存在的問題，它沒有辦法基於目前的值去做屬性的變更，如果想在基礎上做變更，你還需要去先獲取到當前的值（是個字串），轉換成數字，才能去做遞增或者遞減的操作，這個樣子運算成本很大，還會有可能出現不必要的bug。

typedOM

typedOM的出現，給我們對樣式的增刪改查操作提供了很大的便利，typedOM不同於cssOM，它不是透過字串表現形式去修改一個值，而是透過map物件的形式去修改一個值，並且，所有屬性的名稱直接可以按照css樣式的方式去設定，不用寫駝峰了。

如何確認我們的瀏覽器，是否支援typedOM呢？

window.CSS && CSS.number

複製程式碼

typedOM的操作方式繫結在dom的attributeStyleMap方法上，是一個StylePropertyMap物件，該物件提供了四個方法：

append：

set：

dom.attributeStyleMap.set(prop,val)

//示例

document.body.attributeStyleMap.set("width","100px")

//或

document.body.attributeStyleMap.set("width", CSS.px(100))

複製程式碼

用來設定某一個屬性。

clear：

dom.attributeStyleMap.clear()

複製程式碼

用來清除所有StylePropertyMap中設定的屬性，但是並不會清除掉樣式表當中設定的屬性。

delete：

dom.attributeStyleMap.delete(prop)

複製程式碼

用來清除某一個指定的屬性，但是並不會清除掉樣式表當中設定的屬性。

在StylePropertyMap的原型鏈上，還有一個get方法，可以透過傳對應的prop，並返回一個物件，物件裡面包括兩個值，一個是對應的數值，一個是該屬性值的單位：

dom.attributeStyleMap.get("width")

//{value: 100, unit: "px"}

複製程式碼

總結

其實，css typed OM遠不止我文件裡面寫的這些，還有很多數學操作的方法，便於我們更快的進行計算。

綜上所述，我們其實可以看出來一些css typed OM的優勢了，這裡我在總結一下：

1、最大限度的降低了透過字串表現形式去修改css樣式，降低了出現此類bug的風險

2、透過css typed OM的運算方法，最短時間最快的去進行樣式運算

3、錯誤處理，如果有接收到錯誤的css，就會直接丟擲錯誤，方便在最短的時間去定位問題

4、由於dom上的attributeStyleMap方法是一個StylePropertyMap物件，所以方便使用所有的map物件的方法

5、更好的效能！！！由於減少了字串操作，對於 CSSOM 的操作效能得到了更進一步的提升，由 Tab Akins 提供的測試表明，操作 Typed OM 比直接操作 CSSOM 字串帶來了大約 30% 的速度提升

瀏覽器相容

該api在部分瀏覽器支援方面，可能會比較差，建議如果想提升效能的同時，又需要相容n種瀏覽器，請提前寫好相容性程式碼，保證使用者體驗。

在平時的工作當中，我們在操作dom的樣式的時候，其實操作的就是css的物件模型cssOM，其實在16年的時候，就釋出了一組新的物件模型cssTypeOM，這是一個全新的操作css樣式的方式，它的好處有很多，我們一一列舉。

在講解cssOM和cssTypeOM的區別的同時，我們要了解瀏覽器是如何渲染檢視的：

1、解析html後構建dom物件

2、解析css後構建cssOM物件

3、瀏覽器將dom與css組成渲染樹

4、最終瀏覽器渲染到檢視中

cssOM

var width = 100;

document.body.style.width = width + "px";

//需要修改時

document.body.style.width = (width + n(要改變的值)) + "px";

複製程式碼

這就是cssOM目前存在的問題，它沒有辦法基於目前的值去做屬性的變更，如果想在基礎上做變更，你還需要去先獲取到當前的值（是個字串），轉換成數字，才能去做遞增或者遞減的操作，這個樣子運算成本很大，還會有可能出現不必要的bug。

typedOM

typedOM的出現，給我們對樣式的增刪改查操作提供了很大的便利，typedOM不同於cssOM，它不是透過字串表現形式去修改一個值，而是透過map物件的形式去修改一個值，並且，所有屬性的名稱直接可以按照css樣式的方式去設定，不用寫駝峰了。

如何確認我們的瀏覽器，是否支援typedOM呢？

window.CSS && CSS.number

複製程式碼

typedOM的操作方式繫結在dom的attributeStyleMap方法上，是一個StylePropertyMap物件，該物件提供了四個方法：

append：

set：

dom.attributeStyleMap.set(prop,val)

//示例

document.body.attributeStyleMap.set("width","100px")

//或

document.body.attributeStyleMap.set("width", CSS.px(100))

複製程式碼

用來設定某一個屬性。

clear：

dom.attributeStyleMap.clear()

複製程式碼

用來清除所有StylePropertyMap中設定的屬性，但是並不會清除掉樣式表當中設定的屬性。

delete：

dom.attributeStyleMap.delete(prop)

複製程式碼

用來清除某一個指定的屬性，但是並不會清除掉樣式表當中設定的屬性。

在StylePropertyMap的原型鏈上，還有一個get方法，可以透過傳對應的prop，並返回一個物件，物件裡面包括兩個值，一個是對應的數值，一個是該屬性值的單位：

dom.attributeStyleMap.get("width")

//{value: 100, unit: "px"}

複製程式碼

總結

其實，css typed OM遠不止我文件裡面寫的這些，還有很多數學操作的方法，便於我們更快的進行計算。

綜上所述，我們其實可以看出來一些css typed OM的優勢了，這裡我在總結一下：

1、最大限度的降低了透過字串表現形式去修改css樣式，降低了出現此類bug的風險

2、透過css typed OM的運算方法，最短時間最快的去進行樣式運算

3、錯誤處理，如果有接收到錯誤的css，就會直接丟擲錯誤，方便在最短的時間去定位問題

4、由於dom上的attributeStyleMap方法是一個StylePropertyMap物件，所以方便使用所有的map物件的方法

5、更好的效能！！！由於減少了字串操作，對於 CSSOM 的操作效能得到了更進一步的提升，由 Tab Akins 提供的測試表明，操作 Typed OM 比直接操作 CSSOM 字串帶來了大約 30% 的速度提升

瀏覽器相容

該api在部分瀏覽器支援方面，可能會比較差，建議如果想提升效能的同時，又需要相容n種瀏覽器，請提前寫好相容性程式碼，保證使用者體驗。