關(guān)于使用runtimeStyle屬性問題討論文章
更新時間：2007年03月08日 00:00:00 作者：
當(dāng)我們在IE中使用IE提供的DOM時，我們會發(fā)現(xiàn)關(guān)于style的相關(guān)屬性有三個分組，它們分別是style、runtimeStyle和currentStyle。關(guān)于這個三種style的作用和基本用途，我曾經(jīng)在這篇文章中有講過，但隨著越來越深入的使用，總算對怎么使用runtimeStyle屬性有了一些自己的心得。
首先，runtimeStyle屬性不是必需的，它的存在甚至遠(yuǎn)沒有currentStyle有意義，因為由于IE布局、呈現(xiàn)原理限制，style屬性里的定義，總有一些是無法和currentStyle同步的。什么意思呢？比如我們不設(shè)定TR元素的line-height或table-layout樣式屬性，我們是無法得到任意高度的表格行的，即使你費勁寫上100個style="height: 1px"，也是沒有任何效果的。這時style的height雖然是1px，而currentStyle的height仍然是表格實際的高度。firefox不提供runtimeStyle和currentStyle，不知道它怎么解決這個不同步的問題？是不是會反向同步不能表現(xiàn)的style屬性呢？
所以，runtimeStyle屬性說白了就是用來錦上添花的，那么有沒有只有使用runtimeStyle才能完成的功能或效果呢？要說有那也是自找的，比如本blog的Invert頁面顏色功能，這個還真的是只有使用runtimeStyle屬性才能做出來。除此之外，由于對runtimeStyle屬性的設(shè)置不用同步到style，也不會同步，所以使用runtimeStyle修改元素的樣式應(yīng)該有更高的效率。不過這個不同步同時帶來一個比較隱蔽的問題，如果我們總是操作dom，使用runtimeStyle和currentStyle是沒有問題的，可是如果我們在實現(xiàn)中又穿插使用DHTML特性，比如讀寫innerHTML或讀取outerHTML屬性。這時不同步style的問題就出來了，不小心遇上回郁悶個半死的，因為程序不會有任何的運行錯誤，就是不管怎么弄都沒有預(yù)期的效果。
總結(jié)一：runtimeStyle屬性一定要配對使用，即element.runtimeStyle.xxx = 'attribue';和element.runtimeStyle.xxx = '';配對。如果可以明確的寫出element.style.xxx = 'attribue1';和element.style.xxx = 'attribue2';，那么就沒有什么必要使用runtimeStyle了。在同一個元素中混用style和runtimeStyle應(yīng)該是一定要禁止的，由于style和runtimeStyle覆蓋優(yōu)先級不同，如果混用稍有不慎就會出一些莫名奇妙的問題，徒增debug的困擾和難度。
總結(jié)二：runtimeStyle屬性不要在有innerHTML和outerHTML操作的編程環(huán)境中使用，否則不小心就會郁悶個半死。因為runtimeStyle的修改不會同步會html中的style里去，這個問題就會類似上面提到的同一元素中混用style和runtimeStyle的問題。
當(dāng)然混用在首次實現(xiàn)的時候使用，程序員心里面其實是很清楚地，一般不會出什么大差錯，可是這樣的代碼會給后期的debug以及update埋下很嚴(yán)重的錯誤隱患。
首先，runtimeStyle屬性不是必需的，它的存在甚至遠(yuǎn)沒有currentStyle有意義，因為由于IE布局、呈現(xiàn)原理限制，style屬性里的定義，總有一些是無法和currentStyle同步的。什么意思呢？比如我們不設(shè)定TR元素的line-height或table-layout樣式屬性，我們是無法得到任意高度的表格行的，即使你費勁寫上100個style="height: 1px"，也是沒有任何效果的。這時style的height雖然是1px，而currentStyle的height仍然是表格實際的高度。firefox不提供runtimeStyle和currentStyle，不知道它怎么解決這個不同步的問題？是不是會反向同步不能表現(xiàn)的style屬性呢？
所以，runtimeStyle屬性說白了就是用來錦上添花的，那么有沒有只有使用runtimeStyle才能完成的功能或效果呢？要說有那也是自找的，比如本blog的Invert頁面顏色功能，這個還真的是只有使用runtimeStyle屬性才能做出來。除此之外，由于對runtimeStyle屬性的設(shè)置不用同步到style，也不會同步，所以使用runtimeStyle修改元素的樣式應(yīng)該有更高的效率。不過這個不同步同時帶來一個比較隱蔽的問題，如果我們總是操作dom，使用runtimeStyle和currentStyle是沒有問題的，可是如果我們在實現(xiàn)中又穿插使用DHTML特性，比如讀寫innerHTML或讀取outerHTML屬性。這時不同步style的問題就出來了，不小心遇上回郁悶個半死的，因為程序不會有任何的運行錯誤，就是不管怎么弄都沒有預(yù)期的效果。
總結(jié)一：runtimeStyle屬性一定要配對使用，即element.runtimeStyle.xxx = 'attribue';和element.runtimeStyle.xxx = '';配對。如果可以明確的寫出element.style.xxx = 'attribue1';和element.style.xxx = 'attribue2';，那么就沒有什么必要使用runtimeStyle了。在同一個元素中混用style和runtimeStyle應(yīng)該是一定要禁止的，由于style和runtimeStyle覆蓋優(yōu)先級不同，如果混用稍有不慎就會出一些莫名奇妙的問題，徒增debug的困擾和難度。
總結(jié)二：runtimeStyle屬性不要在有innerHTML和outerHTML操作的編程環(huán)境中使用，否則不小心就會郁悶個半死。因為runtimeStyle的修改不會同步會html中的style里去，這個問題就會類似上面提到的同一元素中混用style和runtimeStyle的問題。
當(dāng)然混用在首次實現(xiàn)的時候使用，程序員心里面其實是很清楚地，一般不會出什么大差錯，可是這樣的代碼會給后期的debug以及update埋下很嚴(yán)重的錯誤隱患。
相關(guān)文章
JavaScript如何將數(shù)據(jù)處理成樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript如何將數(shù)據(jù)處理成樹形結(jié)構(gòu)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Javascript新手入門之字符串拼接與變量的應(yīng)用
這篇文章主要給大家介紹了關(guān)于Javascript新手入門之字符串拼接與變量應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
用JavaScript對JSON進行模式匹配(Part 1-設(shè)計)
在《從 if else 到 switch case 再到抽象》這篇文章里面說到，解決 if else 和 switch case 分支過多的一個方法，就是做一個專用的 dispatcher ，讓它來負(fù)責(zé)進行篩選與轉(zhuǎn)發(fā)。2010-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序里長按識別二維碼的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
java和javascript獲取word文檔的書簽位置對比
這篇文章主要介紹了java和javascript獲取word文檔的書簽位置代碼對比,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了詳解js創(chuàng)建對象的幾種方式和對象方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
項目中經(jīng)常會使用到表格，數(shù)據(jù)量大的時候還需要進行分頁，項目設(shè)計階段，我選擇了bootstrapTable的js插件，個人覺得這個框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了discuz表情的JS提取方法,簡單分析了discuz中表情JS文件調(diào)用的原理與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了taro 實現(xiàn)購物車邏輯，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06