【javascript dom讀書筆記】 第九章 CSS-DOM

標籤：

用dom設定樣式

element.style.property = value

 

何時用dom指令碼設定樣式

作者寫到：絕大多數的現代瀏覽器，雖然對css偽類的支援不是很完整，但是對dom都有良好的支援，所以需要考慮的是問題最簡單的解決方案是什麼，哪種解決方案會得到更多的瀏覽器支援。

在嘗試了書中dom設定的執行個體以後，雖然代碼比css要多很多，但是有一種操縱的快感，這應該是dom編程的藝術所在吧，有一種後端語言的感覺，至於實際使用中的選擇，見仁見智做出更適合的自己的決定。

但最後作者說到有一種css用於無法與dom競爭：javascript的指令碼能定時重複執行一組操作，實現css不能實現的效果。下一章的投影片裡會給出示範！

 

幾個常用的封裝函數

因為有很多不錯的常用函數，可以放到外部js中隨時調用，下面介紹本書中的幾個函數

addLoadEvent

 1 function addLoadEvent(func){  2 //將函數作為參數，此函數就是 onload 觸發時需要執行的某個函數 3     var oldonload=window.onload;  4     //將原來的 onload 的值賦給臨時變數 oldonload。 5     if(typeof window.onload!="function"){  6     //判斷 onload 的類型是否是 function。如果已經執行window.onload=function(){...} 賦值，那麼此時 onload 的類型就是 function 7     //否，則說明 onload 還沒有被賦值，當前任務 func 為第一個加入的任務 8         window.onload=func();  9         //作為第一個任務，給 onload 賦值10     }else{ 11     //是，則說明 onload 已被賦值，onload 中先前已有任務加入12         window.onload=function(){13             oldonload();14             func(); 15             //作為後續任務，追加到先前的任務後面16         }17     }18 }

 

下一個元素節點getNextElement

 

1 function getNextElement(node){2     if(node.nodeType==1){3         return node;4     }5     if(node.nextSibling){6         return getNextElement(node.nextSibling);7     }8     return null;9 }

 

 

【javascript dom讀書筆記】 第九章 CSS-DOM