當(dāng)我們在IE中使用IE提供的DOM時(shí)，我們會(huì)發(fā)現(xiàn)關(guān)于style的相關(guān)屬性有三個(gè)分組，它們分別是style、runtimeStyle和currentStyle。關(guān)于這個(gè)三種style的作用和基本用途，我曾經(jīng)在這篇文章中有講過，但隨著越來越深入的使用，總算對怎么使用runtimeStyle屬性有了一些自己的心得。

    首先，runtimeStyle屬性不是必需的，它的存在甚至遠(yuǎn)沒有currentStyle有意義，因?yàn)橛捎贗E布局、呈現(xiàn)原理限制，style屬性里的定義，總有一些是無法和currentStyle同步的。什么意思呢？比如我們不設(shè)定TR元素的line-height或table-layout樣式屬性，我們是無法得到任意高度的表格行的，即使你費(fèi)勁寫上100個(gè)style="height: 1px"，也是沒有任何效果的。這時(shí)style的height雖然是1px，而currentStyle的height仍然是表格實(shí)際的高度。firefox不提供runtimeStyle和currentStyle，不知道它怎么解決這個(gè)不同步的問題？是不是會(huì)反向同步不能表現(xiàn)的style屬性呢？

    所以，runtimeStyle屬性說白了就是用來錦上添花的，那么有沒有只有使用runtimeStyle才能完成的功能或效果呢？要說有那也是自找的，比如本blog的Invert頁面顏色功能，這個(gè)還真的是只有使用runtimeStyle屬性才能做出來。除此之外，由于對runtimeStyle屬性的設(shè)置不用同步到style，也不會(huì)同步，所以使用runtimeStyle修改元素的樣式應(yīng)該有更高的效率。不過這個(gè)不同步同時(shí)帶來一個(gè)比較隱蔽的問題，如果我們總是操作dom，使用runtimeStyle和currentStyle是沒有問題的，可是如果我們在實(shí)現(xiàn)中又穿插使用DHTML特性，比如讀寫innerHTML或讀取outerHTML屬性。這時(shí)不同步style的問題就出來了，不小心遇上回郁悶個(gè)半死的，因?yàn)槌绦虿粫?huì)有任何的運(yùn)行錯(cuò)誤，就是不管怎么弄都沒有預(yù)期的效果。

    總結(jié)一：runtimeStyle屬性一定要配對使用，即element.runtimeStyle.xxx = 'attribue';和element.runtimeStyle.xxx = '';配對。如果可以明確的寫出element.style.xxx = 'attribue1';和element.style.xxx = 'attribue2';，那么就沒有什么必要使用runtimeStyle了。在同一個(gè)元素中混用style和runtimeStyle應(yīng)該是一定要禁止的，由于style和runtimeStyle覆蓋優(yōu)先級(jí)不同，如果混用稍有不慎就會(huì)出一些莫名奇妙的問題，徒增debug的困擾和難度。

    總結(jié)二：runtimeStyle屬性不要在有innerHTML和outerHTML操作的編程環(huán)境中使用，否則不小心就會(huì)郁悶個(gè)半死。因?yàn)閞untimeStyle的修改不會(huì)同步會(huì)html中的style里去，這個(gè)問題就會(huì)類似上面提到的同一元素中混用style和runtimeStyle的問題。

    當(dāng)然混用在首次實(shí)現(xiàn)的時(shí)候使用，程序員心里面其實(shí)是很清楚地，一般不會(huì)出什么大差錯(cuò)，可是這樣的代碼會(huì)給后期的debug以及update埋下很嚴(yán)重的錯(cuò)誤隱患。

最新評(píng)論