關(guān)于使用runtimeStyle屬性問(wèn)題討論文章

2024-09-06 12:43:09

字體：大中小

供稿：網(wǎng)友

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

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

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

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

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

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

上一篇：在JavaScript中遭遇級(jí)聯(lián)表達(dá)式陷阱

下一篇：JavaScript語(yǔ)句可以不以;結(jié)尾的煩惱