Let’s talk about dynamically adding style rules again

I used to give a useful function in one blog post , and it has been widely used in several of my blog posts. I have been reading a lot recently, so I wrote this blog post to sort out the new things I learned.

There is no doubt that based on the principle of separation of performance and structure, directly importing a new style sheet is the best choice, but in some cases it will not work. For example, if we make a draggable DIV, from the perspective of setting styles, it is Position it absolutely to prevent it from affecting the original document flow, and then change its top and left values ​​little by little to achieve the effect of movement. Since dragging has a time concept, 24 frames per second, it is impossible to include everything in the style sheet. Therefore, it is very necessary to dynamically generate style rules and quickly modify style rules. W3C has done a lot of work for this. In DOM2.0, many interfaces have been expanded.

To take a step back, the separation of performance and structure is not limited to importing style sheets. You know, there are three types of styles, external styles, internal styles, and inline styles.

• External styles, the ones we mentioned above, are written in a separate CSS file.
• Internal styles are written independently in a style tag, usually placed in the head tag. The style generated by the function I provided last is the internal style.
• Inline styles are styles written in the style attribute of the element.

The newly added interfaces are mainly concentrated in external styles - I say interfaces because the corresponding implementations are provided by the browser. Arrogant guys like IE6 never ignore their existence.

In the W3C model, the link tag and style tag of type "text/css" both represent a CSSStyleSheet object. We can obtain all CSSStyleSheet objects in the current page through document.styleSheets, but this is a collection, not a simple one. array. Each CSSStyleSheet object has the following properties,

• type: always returns "text/css" string.
• disabled: It has the same effect as input's disabled, and the default is false.
• href: Returns the URL, if it is a style tag, it is null.
• title: Returns the value of its title. The title is the same as the title of an ordinary element. You can write whatever you like.
• media: The things returned by IE and Firefox are not consistent, so it’s hard to say. media is used to specify which devices the style rules it owns are valid for. The default is all.
• ownerRule: Returns a read-only CSSRule object if the style sheet is introduced with @import.
• cssRules: Returns a collection of read-only style rule objects (CSSStyleRule objects).

The style rule object (CSSStyleRule object) was developed by W3C in order to set the style in more detail. For example, the following thing corresponds to a style rule object:

button[type] {
padding:4px 10px 4px 7px;
line-height:17px;
}

The style rule object has the following main attributes: type, cssText, parentStyleSheet, parentRule.

Type is somewhat similar to nodeType, which subdivides style rules. It uses an integer to represent its type. The specific situation is as follows

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (define a CSSStyleRule object)
• 2: CSSRule.CHARSET_RULE (define a CSSCharsetRule object, used to set the character set of the current style sheet, the default is the same as the current web page)
• 3: CSSRule.IMPORT_RULE (define a CSSImportRule object, which is to use @import to introduce other style sheets)
• 4: CSSRule.MEDIA_RULE (define a CSSMediaRule object, used to set whether this style is used for monitors, printers, projectors, etc.)
• 5: CSSRule.FONT_FACE_RULE (define a CSSFontFaceRule object, CSS3’s @font-face)
• 6: CSSRule.PAGE_RULE (define a CSSPageRule object)

Needless to say, cssText is a very useful attribute that directly converts strings into style rules, ignoring the differences in style attributes of each browser, such as cssFloat and styleFloat.

parentStyleSheet and parentRule are both for @import. However, @import has problems under IE, so I basically don’t use it.