将 Javascript 放入 CSS答案

【问题标题】：Putting Javascript into CSS将 Javascript 放入 CSS
【发布时间】：2011-05-30 23:46:57
【问题描述】：

我一直在想一些事情。在我的论坛上，有用户可以选择的默认 CSS 代码。这会改变从背景到文本颜色的所有内容。我有一个 JavaScript 代码。是否有可能使javascript成为CSS的一部分，这样如果某个CSS代码被默认，那么它的一部分就是那个javascript？

【问题讨论】：

标签： javascript css templates

【解决方案1】：

You can，但你真的不应该这样做。相反，请使用与您使用的 CSS 文件相对应的单独脚本文件。也许再问一个问题，在其中列出您尝试解决特定问题的特定场景，我们可能会告诉您通常为解决该问题而采取的做法。

【讨论】：

在 CSS 中嵌入 JS 有很多不同的方法。参见例如stackoverflow.com/questions/3607894/…
你不应该出于性能/兼容性的原因将 JS 放入 CSS 中，但你不应该假设黑客不能因为 grahamparks 链接到的原因。

【解决方案2】：

有一个解决方法...

它不是将脚本放在纯 CSS 代码中，而是有一个脚本来生成 CSS 根据您使用的脚本语言（例如 PHP），您的 CSS 文件链接应如下所示：

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

您甚至可以添加如下参数：

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

在你的 style.php 中应该是 CSS 文件，但有一些例外：

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

【讨论】：

【解决方案3】：

我想完成同样的事情（在 CSS 中有变量和一些处理逻辑），这促使我开发了几个独立的工具（一个 Angular 和一个 V-JS）：

CjsSS.js 是一个支持回到 IE6 的 Vanilla Javascript 工具（因此没有外部依赖项）。
ngCss 是一个 Angular Module+Filter+Factory（又名：插件），支持 Angular 1.2+（所以回到 IE8）

这两个工具集都允许您在 STYLE 标记或外部 *.css 文件中执行此操作：

/*
<script src='external_logic.js'></script>
<script>
    var mainColor = "#cccccc";
</script>*/

BODY {
    color: /*{{mainColor}}*/;
}

这在你的页面style属性中：

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

（或用于 ngCss）

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

注意：在 ngCss 中，您也可以使用 $scope.mainColor 代替 var mainColor

默认情况下，Javascript 在沙盒 IFRAME 中执行，但实际上它与浏览器处理您的 *.js 文件的方式没有任何不同。只要确保编写您自己的 CSS 并将其托管在您自己的服务器上，那么 XSS 就不是问题了。但是沙盒提供了更高的安全性和安心感。

CjsSS.js 和 ngCss 介于完成类似任务的其他工具之间：

LESS、SASS 和 Stylus 都只是预处理器，需要你学习一门新语言并破坏你的 CSS。基本上他们用新的语言特性扩展了 CSS。所有这些都仅限于为每个平台开发的插件，而 CjsSS.js 和 ngCss 都允许您通过 <script src='blah.js'></script> 包含任何 Javascript 库。
AbsurdJS 在预处理器中发现了同样的问题，并采取了完全相反的方向； AbsurdJS 没有扩展 CSS，而是创建了一个 Javascript 库来生成 CSS，而无需直接接触 CSS。

CjsSS.js 和 ngCss 处于中间位置；你已经了解 CSS，你已经了解 Javascript，所以只需让它们以简单、直观的方式协同工作。 CjsSS.js 可以在服务器端（通过 Node.js）运行以预处理 CSS，或者两者都可以在客户端运行。您还可以以混合方式运行，其中大多数变量都经过预处理，其余变量在客户端完成。

【讨论】：