Discussion article on using runtimeStyle attribute_javascript skills

When we use the DOM provided by IE in IE, we will find that there are three groupings of style-related attributes, which are style, runtimeStyle and currentStyle. I have talked about the functions and basic uses of these three styles in this article, but with more and more in-depth use, I finally have some insights on how to use the runtimeStyle attribute.

First of all, the runtimeStyle attribute is not necessary. Its existence is even far less meaningful than currentStyle, because due to the limitations of IE layout and rendering principles, there are always some definitions in the style attribute that cannot be synchronized with currentStyle. What does it mean? For example, if we do not set the line-height or table-layout style attributes of the TR element, we cannot get table rows of any height. Even if you try to write 100 style="height: 1px", it will have no effect. At this time, although the height of style is 1px, the height of currentStyle is still the actual height of the table. Firefox does not provide runtimeStyle and currentStyle. I wonder how it can solve this out-of-synchronization problem? Will it reverse synchronize the style attributes that cannot be expressed?

So, to put it bluntly, the runtimeStyle attribute is used to add icing on the cake. So are there any functions or effects that can only be accomplished using runtimeStyle? If you have it, you have to ask for it. For example, the Invert page color function of this blog can only be achieved by using the runtimeStyle attribute. In addition, since the setting of the runtimeStyle attribute does not need to be synchronized to the style, nor will it be synchronized, it should be more efficient to use runtimeStyle to modify the style of the element. However, this desynchronization also brings about a relatively hidden problem. If we always operate the dom, there is no problem using runtimeStyle and currentStyle. However, if we intersperse the use of DHTML features in the implementation, such as reading and writing innerHTML or reading outerHTML attributes . At this time, the problem of out-of-sync style came out, and I was very depressed when I accidentally encountered it, because the program would not have any running errors, but no matter how I tried it, it would not have the expected effect.

Summary 1: The runtimeStyle attribute must be used in pairs, that is, element.runtimeStyle.xxx = 'attribue'; and element.runtimeStyle.xxx = '';. If you can clearly write element.style.xxx = 'attribue1'; and element.style.xxx = 'attribue2';, then there is no need to use runtimeStyle. Mixing style and runtimeStyle in the same element should be prohibited. Since style and runtimeStyle have different coverage priorities, some inexplicable problems will occur if they are mixed carelessly, which will only increase the trouble and difficulty of debugging.

Summary 2: Do not use the runtimeStyle attribute in a programming environment with innerHTML and outerHTML operations, otherwise you will be depressed to death 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 mentioned above of mixing style and runtimeStyle in the same element.

Of course, mixing is used when it is first implemented. Programmers know very clearly that generally there will be no big mistakes. However, such code will cause serious errors in later debugging and updates. Hidden danger.