關于使用runtimeStyle屬性問題討論文章
更新時間:2007年03月08日 00:00:00 作者:
當我們在IE中使用IE提供的DOM時,我們會發(fā)現(xiàn)關于style的相關屬性有三個分組,它們分別是style、runtimeStyle和currentStyle。關于這個三種style的作用和基本用途,我曾經在這篇文章中有講過,但隨著越來越深入的使用,總算對怎么使用runtimeStyle屬性有了一些自己的心得。
首先,runtimeStyle屬性不是必需的,它的存在甚至遠沒有currentStyle有意義,因為由于IE布局、呈現(xiàn)原理限制,style屬性里的定義,總有一些是無法和currentStyle同步的。什么意思呢?比如我們不設定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屬性的設置不用同步到style,也不會同步,所以使用runtimeStyle修改元素的樣式應該有更高的效率。不過這個不同步同時帶來一個比較隱蔽的問題,如果我們總是操作dom,使用runtimeStyle和currentStyle是沒有問題的,可是如果我們在實現(xiàn)中又穿插使用DHTML特性,比如讀寫innerHTML或讀取outerHTML屬性。這時不同步style的問題就出來了,不小心遇上回郁悶個半死的,因為程序不會有任何的運行錯誤,就是不管怎么弄都沒有預期的效果。
總結一:runtimeStyle屬性一定要配對使用,即element.runtimeStyle.xxx = 'attribue';和element.runtimeStyle.xxx = '';配對。如果可以明確的寫出element.style.xxx = 'attribue1';和element.style.xxx = 'attribue2';,那么就沒有什么必要使用runtimeStyle了。在同一個元素中混用style和runtimeStyle應該是一定要禁止的,由于style和runtimeStyle覆蓋優(yōu)先級不同,如果混用稍有不慎就會出一些莫名奇妙的問題,徒增debug的困擾和難度。
總結二:runtimeStyle屬性不要在有innerHTML和outerHTML操作的編程環(huán)境中使用,否則不小心就會郁悶個半死。因為runtimeStyle的修改不會同步會html中的style里去,這個問題就會類似上面提到的同一元素中混用style和runtimeStyle的問題。
當然混用在首次實現(xiàn)的時候使用,程序員心里面其實是很清楚地,一般不會出什么大差錯,可是這樣的代碼會給后期的debug以及update埋下很嚴重的錯誤隱患。
首先,runtimeStyle屬性不是必需的,它的存在甚至遠沒有currentStyle有意義,因為由于IE布局、呈現(xiàn)原理限制,style屬性里的定義,總有一些是無法和currentStyle同步的。什么意思呢?比如我們不設定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屬性的設置不用同步到style,也不會同步,所以使用runtimeStyle修改元素的樣式應該有更高的效率。不過這個不同步同時帶來一個比較隱蔽的問題,如果我們總是操作dom,使用runtimeStyle和currentStyle是沒有問題的,可是如果我們在實現(xiàn)中又穿插使用DHTML特性,比如讀寫innerHTML或讀取outerHTML屬性。這時不同步style的問題就出來了,不小心遇上回郁悶個半死的,因為程序不會有任何的運行錯誤,就是不管怎么弄都沒有預期的效果。
總結一:runtimeStyle屬性一定要配對使用,即element.runtimeStyle.xxx = 'attribue';和element.runtimeStyle.xxx = '';配對。如果可以明確的寫出element.style.xxx = 'attribue1';和element.style.xxx = 'attribue2';,那么就沒有什么必要使用runtimeStyle了。在同一個元素中混用style和runtimeStyle應該是一定要禁止的,由于style和runtimeStyle覆蓋優(yōu)先級不同,如果混用稍有不慎就會出一些莫名奇妙的問題,徒增debug的困擾和難度。
總結二:runtimeStyle屬性不要在有innerHTML和outerHTML操作的編程環(huán)境中使用,否則不小心就會郁悶個半死。因為runtimeStyle的修改不會同步會html中的style里去,這個問題就會類似上面提到的同一元素中混用style和runtimeStyle的問題。
當然混用在首次實現(xiàn)的時候使用,程序員心里面其實是很清楚地,一般不會出什么大差錯,可是這樣的代碼會給后期的debug以及update埋下很嚴重的錯誤隱患。
相關文章
js Element Traversal規(guī)范中的元素遍歷方法
對于元素間的空格,在IE9之前,都不會返回文檔節(jié)點,其它的所有瀏覽器都會返回文檔節(jié)點,為了兼容瀏覽器這間的差異,又不更改已有的DOM 標準,所以有了 Element Traversal 規(guī)范2018-04-04
JavaScript學習小結之被嫌棄的eval函數(shù)和with語句實例詳解
這篇文章主要介紹了JavaScript學習小結之被嫌棄的eval和with實例詳解的相關資料,需要的朋友可以參考下2016-08-08
JavaScript在form表單中使用button按鈕實現(xiàn)submit提交方法
在form表單提交中,使用button來間接完成submit的提交更為靈活。接下來通過本文給大家介紹JavaScript在form表單中使用button按鈕實現(xiàn)submit提交方法,需要的朋友參考下吧2017-01-01
uniapp使用webview嵌入vue頁面及通信實現(xiàn)方式
項目中有需要嵌入其他H5的頁面的業(yè)務需求,這篇文章主要給大家介紹了關于uniapp使用webview嵌入vue頁面及通信實現(xiàn)方式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
利用JavaScript在網頁實現(xiàn)八數(shù)碼啟發(fā)式A*算法動畫效果
這篇文章主要介紹了利用JavaScript在網頁實現(xiàn)八數(shù)碼啟發(fā)式A*算法動畫效果,需要的朋友可以參考下2017-04-04
asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法,需要的朋友可以參考一下2013-03-03
讓iframe子窗體取父窗體地址欄參數(shù)(querystring)
突然用到,記錄一下,對地址欄字符串用正則處理最好,有時間研究一下。 主要是思路。2009-10-10

