将 Javascript 放入 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4536237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting Javascript into CSS
提问by Eric
I've been thinking about something. On my forum, there are default CSS codes that the users can choose from. This changes everything from background to text color. I have a javascript code. Is it possible to make it so that the javascript is part of the CSS, so that if a certain CSS code is defaulted, then part of it is that javascript?
我一直在想一件事。在我的论坛上，用户可以选择默认的 CSS 代码。这会改变从背景到文本颜色的所有内容。我有一个 javascript 代码。是否有可能使 javascript 成为 CSS 的一部分，以便如果某个 CSS 代码被默认设置，那么它的一部分就是那个 javascript？
回答by Dave Markle
You can, but you really ought not to. Instead, use separate script files which happen to correspond to the CSS files you use. Maybe ask another question where you lay out a specific scenario where you're trying to solve a specific problem, and we can probably tell you the practice that's generally done to solve it.
你可以，但你真的不应该。相反，使用与您使用的 CSS 文件相对应的单独脚本文件。也许再问一个问题，在其中列出您试图解决特定问题的特定场景，我们可能会告诉您通常为解决该问题而进行的实践。
回答by bensiu
There is a work around...
有一个解决方法......
It not putting script in pure CSS code, but have a script to generate CSS Depending what scripting language you are using (eg PHP) your link to CSS file should look like:
它不是将脚本放在纯 CSS 代码中，而是有一个脚本来生成 CSS 根据您使用的脚本语言（例如 PHP），您的 CSS 文件链接应如下所示：
<link href="/styles.php" media="screen" rel="stylesheet" type="text/css" />
you can even add params like:
你甚至可以添加如下参数：
<link href="/styles.php?type=main" media="screen" rel="stylesheet" type="text/css" />
and in you styles.php what should look like CSS file with a few exceptions:
在你的 style.php 中，除了一些例外，CSS 文件应该是什么样的：
body {
<?php if ( $_GET['type'] == 'main' ) echo color: BLACK; else color: RED; ?>
.........
}
回答by Campbeln
I wanted to accomplish the same thing (have variables and some processing logic in CSS) that egged me to develop a couple of standalone tools (one Angular and one V-JS):
我想完成同样的事情（在 CSS 中有变量和一些处理逻辑），这促使我开发了几个独立工具（一个 Angular 和一个 V-JS）：
CjsSS.jsis a Vanilla Javascript tool (so no external dependencies) that supports back to IE6.
ngCssis an Angular Module+Filter+Factory (aka: plugin) that supports Angular 1.2+ (so back to IE8)
CjsSS.js是一个 Vanilla Javascript 工具（因此没有外部依赖项），它支持回 IE6。
ngCss是一个 Angular Module+Filter+Factory（又名：插件），支持 Angular 1.2+（回到 IE8）
Both of these tool sets allow you to do this in a STYLE tag or within an external *.css file:
这两个工具集都允许您在 STYLE 标签或外部 *.css 文件中执行此操作：
/*
<script src='external_logic.js'></script>
<script>
var mainColor = "#cccccc";
</script>*/
BODY {
color: /*{{mainColor}}*/;
}
And this in your on-page styleattributes:
这在您的页面style属性中：
<div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div>
(or for ngCss)
（或用于 ngCss）
<div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div>
NOTE: In ngCss, you could also do $scope.mainColorin place of var mainColor
注意：在 ngCss 中，您也可以$scope.mainColor代替var mainColor
By default, the Javascript is executed in a sandboxed IFRAME, but really it's not any different from how the browser processes your *.js files. Just be sure to author your own CSS and host it on your own server then XSS isn't an issue. But the sandbox provides that much more security and peace of mind.
默认情况下，Javascript 在沙盒 IFRAME 中执行，但实际上它与浏览器处理 *.js 文件的方式没有任何不同。只要确保编写您自己的 CSS 并将其托管在您自己的服务器上，那么 XSS 就不是问题。但是沙箱提供了更多的安全性和安心。
CjsSS.js and ngCss fall somewhere in-between the other tools around to accomplish similar tasks:
CjsSS.js 和 ngCss 介于其他工具之间，可以完成类似的任务：
LESS, SASSand Stylusare all Preprocessors only and require you to learn a new language and mangle your CSS. Basically they extended CSS with new language features. All are also limited to plugins developed for each platform while CjsSS.js and ngCss both allow you to include any Javascript library via
<script src='blah.js'></script>.AbsurdJSsaw the same problems with the Preprocessors and went the exact opposite direction; rather than extending CSS, AbsurdJS created a Javascript library to generate CSS without touching CSS directly.
LESS、SASS和Stylus都只是预处理器，需要你学习一门新语言并修改你的 CSS。基本上，他们使用新的语言功能扩展了 CSS。所有这些也仅限于为每个平台开发的插件，而 CjsSS.js 和 ngCss 都允许您通过 .js 文件包含任何 Javascript 库
<script src='blah.js'></script>。AbsurdJS发现预处理器也存在同样的问题，并朝着完全相反的方向发展；AbsurdJS 没有扩展 CSS，而是创建了一个 Javascript 库来生成 CSS，而无需直接接触 CSS。
CjsSS.js and ngCss took the middle ground; you already know CSS, you already know Javascript, so just let them work together in a simple, intuitive way. CjsSS.js can be run server-side (via Node.js) to preprocess the CSS or both can be run client-side. You can also run in a hybrid fashion where most variables are preprocessed and the remaining are done on the client-side.
CjsSS.js 和 ngCss 处于中间位置；你已经知道 CSS，你已经知道 Javascript，所以让它们以简单、直观的方式协同工作。CjsSS.js 可以在服务器端（通过 Node.js）运行来预处理 CSS，或者两者都可以在客户端运行。您还可以以混合方式运行，其中大多数变量都经过预处理，其余的在客户端完成。
