About how to use runtimeStyle attributes

When we use the DOM provided by IE in IE, we will find that there are three groups about the style attributes, namely style, runtimeStyle and currentStyle. I have mentioned the functions and basic functions of these three styles in this article. However, with the increasing use of these styles, I have gained some insights on how to use the runtimeStyle attribute.

First of all, the runtimeStyle attribute is not required, and its existence is far from the significance of currentStyle. Because of the limitations of IE layout and Rendering Principle, the definition in the style attribute is, there are always some that cannot be synchronized with currentStyle. What does it mean? For example, if we do not set the line-height or table-layout style attribute of the TR element, we cannot get table rows of any height, even if you have to write 100 style = "height: 1px ", there is no effect. At this time, although the height of the style is 1px, the height of currentStyle is still the actual height of the table. Firefox does not provide runtimeStyle and currentStyle. I don't know how it solves this problem of non-synchronization? Will reverse synchronization be performed on styles that cannot be displayed?

Therefore, the runtimeStyle attribute is used for icing on the cake. Is there any function or effect that can be achieved only by using runtimeStyle? It is also self-explanatory. For example, the Invert page color function of this blog can only be made using the runtimeStyle attribute. In addition, the settings of the runtimeStyle attribute do not need to be synchronized to the style or not, so using runtimeStyle to modify the element style should be more efficient. However, this non-synchronization will bring about a relatively hidden problem. If we always operate the dom, it is no problem to use runtimeStyle and currentStyle. However, if we use the DHTML feature in the implementation, for example, read and write innerHTML or read the outerHTML attribute. At this time, the problem of not synchronizing the style came out, and we accidentally encountered a depressing problem, because the program will not have any running errors, that is, no matter how it is done, it will not have the expected effect.

Conclusion 1: The runtimeStyle attribute must be paired, I .e., element. runtimeStyle. xxx = 'bubue'; and element. runtimeStyle. xxx =. If you can explicitly write element. style. xxx = 'bubue1 '; and element. style. xxx = 'attribue2';, there is no need to use runtimeStyle. Mixing styles and runtimestyles in the same element must be forbidden. Because the overwrite priority of styles and runtimestyles is different, it may cause some strange problems if you mix them accidentally, add debugging troubles and difficulties.

Conclusion 2: The runtimeStyle attribute should not be used in programming environments with innerHTML and outerHTML operations. Otherwise, it will be depressing if you are not careful. Because the modification of runtimeStyle will not be synchronized to the style in html, this problem will be similar to the problem of mixing style and runtimeStyle in the same element mentioned above.

Of course, when mixed use is used for the first implementation, the programmer is actually very clear in his mind, generally there will be no major mistakes, however, such code may cause serious errors for debugging and update later.