Dynamic CSS management using Javascript

CSS is usually pre-defined, whether embedded or external. In fact, using JavaScript, we can also dynamically insert or delete CSS in the page to add CSS.

CSS is usually pre-defined, whether embedded or external. In fact, using JavaScript, we can also dynamically insert or delete CSS in the page.

A common scenario is CSS animation. Because we cannot predict the animation details when designing webpages, We need to customize them during runtime. For example, if we want an element to fly out of the screen from the right side, if we use a keyframe animation, we must know the width of the screen. This information is only available at runtime.
For example, the following 1026px is the runtime browser window width.

Css

12345678910

@-Webkit-keyframes slide-right {0% {-webkit-transform: translateX (0px) scale (1);-webkit-transform-origin: 50% 50% ;} 100% {-webkit-transform: translateX (1026px) scale (1);-webkit-transform-origin: 50% 50% ;}}

To run the animation, we need to add the css of the keyframe to the Style node of the page.

We can find the first available style node in the styleSheets of the document object on the page. If there is no style node on the current page, we need to create a new one:

JavaScript

12345678910111213141516171819

/*** Insert CSS keyframe rule */insertCSS: function (rule) {if (document. styleSheets & document. styleSheets. length) {try {document. styleSheets [0]. insertRule (rule, 0);} catch (ex) {console. warn (ex. message, rule) ;}} else {varstyle = document. createElement ("style"); style. innerHTML = rule; document. head. appendChild (style);} return ;}

The rule parameter is used to add css text.

If we want to apply the above animation to an element, we can dynamically define a css class:

Css

1234567891011

. AnimateSlideRight {-webkit-animation-name: slide-right;-webkit-animation-delay: 0 ms;-webkit-animation-duration: 1 s; -webkit-animation-timing-function: linear;-webkit-animation-iteration-count: 1;-webkit-animation-direction: normal;-webkit-perspective: 1000px; -webkit-perspective-origin: 50% 50%;-webkit-backface-visibility: visible ;}

We can also use the insertCSS method to insert css into the style node. Note that the preceding function can only add one css rule at a time. If the rule contains two or more rules, an error occurs in the insertRule method. This is why the parameter name is rule rather than cssText.

In this example, we need to execute the insertCSS function twice, insert the CSS of the keyframe for the first time, and insert the CSS of the class for the second time.

Then we can use the following statement to set the class of the element and play the animation effect of the element:

JavaScript

1	Elem. className + = ''+ className;

Delete CSS

If the animation is temporarily played, we also need to delete the css of the added keyframe and the css of the class after the animation ends to avoid making garbage on the page.

Delete CSS or access styleSheets of document. Since we have been adding CSS to styleSheet [0], we can only access the first CSSStyleSheet instance in styleSheets When deleting the CSS.

The css we added and the original css are saved in the cssrules list of the CSSStyleSheet object:

If you want to delete the css of the keyframe, you can use the name attribute of the rule to determine:

If you want to delete the class css, you need to use the selectorText of rule to determine

We use the following deleteCSS function to implement this function:

JavaScript

123456789101112131415161718

/*** Delete CSS keyframe rule */deleteCSS: function (ruleName) {varcssrules = (document. all )? "Rules": "cssRules", I; for (I = 0; I <document. styleSheets [0] [cssrules]. length; I + = 1) {varrule = document. styleSheets [0] [cssrules] [I]; if (rule. name = ruleName | rule. selectorText = '. '+ ruleName) {document. styleSheets [0]. deleteRule (I); if (this. debug) {console. log ("Deleted keyframe:" + ruleName) ;}break ;}}return ;},

This function does not consider other situations, such as # elementCSS. You can expand this function on your own.