Insert Javascript in CSS

Question

I was thinking something. My forum has default CSS codes that users can select. This changes everything from background to text color. I have javascript code. Is it possible to make it so that javascript is part of the CSS, so if there is some CSS code by default, then part of this is that of javascript?

Answer 1

You can , but you really shouldn't do that. Instead, use separate script files that match your CSS files. Perhaps ask another question in which you will present a specific scenario in which you are trying to solve a specific problem, and we will probably tell you about the practice that was usually performed to solve it.

Answer 2

There is work around ...

It does not put the script in pure CSS code, but has a script to generate CSS. Depending on which scripting language you use (e.g. PHP), your link to the CSS file should look like this:

<link href="/styles.php" media="screen" rel="stylesheet" type="text/css" /> 

You can add such parameters as:

 <link href="/styles.php?type=main" media="screen" rel="stylesheet" type="text/css" /> 

and you have style.php, which should look like a CSS file with a few exceptions:

 body { <?php if ( $_GET['type'] == 'main' ) echo color: BLACK; else color: RED; ?> ......... } 

Answer 3

I wanted to accomplish the same thing (with variables and some processing logic in CSS) that pushed me to develop several stand-alone tools (one Angular and one V-JS):

• CjsSS.js is a Vanilla Javascript tool (so no external dependencies) that supports back to IE6.

• ngCss is an Angular Module + Filter + Factory (aka: plugin) that supports Angular 1.2 + (back to IE8)

Both of these toolkits allow you to do this in the STYLE tag or in an external * .css file:

 /* <script src='external_logic.js'></script> <script> var mainColor = "#cccccc"; </script>*/ BODY { color: /*{{mainColor}}*/; } 

And this is in your on-page style attributes:

 <div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div> 

(or for ngCss)

 <div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div> 

NOTE. In ngCss you can also do $scope.mainColor instead of var mainColor

By default, Javascript runs in an isolated IFRAME, but in reality it is no different from how the browser handles your * .js files. Just remember to create your own CSS and host it on your own server, then XSS will not be a problem. But the sandbox provides much greater security and peace of mind.

CjsSS.js and ngCss are somewhere between other tools for performing similar tasks:

• LESS , SASS, and Stylus are just preprocessors and require you to learn a new language and maim your CSS. They basically expanded CSS with new language features. All of them are also limited to plugins designed for each platform, while CjsSS.js and ngCss allow you to include any Javascript library through <script src='blah.js'></script> .

• AbsurdJS saw the same problems with preprocessors and went in the opposite direction; Instead of extending CSS, AbsurdJS created a Javascript library to generate CSS without directly touching CSS.

CjsSS.js and ngCss took a middle position; you already know CSS, you already know Javascript, so just let them work together in a simple, intuitive way. CjsSS.js can be run on the server side (via Node.js) for CSS preprocessing, or both can be executed on the client side. You can also run in a hybrid way, when most variables are pre-processed and the rest are executed on the client side.