Dynamic CSS

App.md

Dynamic CSS

dynamic-css.markdown

Dynamic CSS

A Pen by K.C.Ashish Kumar on CodePen.

License.

index.html

<div>
	Text with Dynamic CSS
</div>

script.js

(function(w, d) {
	w.applyCSSRule = function(cssRuleText) {
		var ruleID = "k4nf0pmb665v079pfa495";
		/*dcr --> dynamicCSSRule*/
		var dcr = d.querySelector("style#" + ruleID);
		dcr && dcr.parentNode.removeChild(dcr);
		dcr = d.createElement("style");
		dcr.id = ruleID;
		dcr.type = "text/css";
		if (dcr.styleSheet) {
			dcr.styleSheet.cssText = cssRuleText;
		} else {
			dcr.appendChild(d.createTextNode(cssRuleText));
		}
		d.querySelector("head").appendChild(dcr);
	};
})(window, document);

/*------------------------------------------------*/

/*Use as below*/
var css ="\
body{\
	background-color: rgb(255, 128, 0);\
}\
div{\
	font-family: Verdana;\
	color: #fff;\
}\
div:before{\
	content:'Pseudo Text Before';\
	color:#ffba75;\
	font-size: 11px;\
}\
div:after{\
	content:'Pseudo Text After';\
	font-size: 11px;\
}";
applyCSSRule(css);