将Javascript放入CSS

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

，但您确实不应该这样做。相反，使用单独的脚本文件，这些脚本文件恰好与您使用的CSS文件相对应。也许你会问另一个问题，在这个问题上，你会提出一个你试图解决一个特定问题的特定场景，我们可能会告诉你通常解决这个问题的方法。

有一个解决方法

它不是将脚本放在纯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" />

在您的styles.php中，除了几个例外，CSS文件应该是什么样子的：

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

正文{
......... 
}

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

• 是一个普通的Javascript工具（因此没有外部依赖），支持返回IE6

• 是一个Angular模块+过滤器+工厂（又名：插件），支持Angular 1.2+（回到IE8）

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

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

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

（或用于ngCss）

废话

注意：在ngCss中，您还可以使用

$scope.mainColor

代替

var mainColor

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

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

• ，都是预处理器，需要学习一种新的语言并修改CSS。基本上，他们用新的语言特性扩展了CSS。所有这些都仅限于为每个平台开发的插件，而CjsSS.js和ngCss都允许您通过
  包含任何Javascript库

• 看到了预处理器同样的问题，却走向了完全相反的方向；荒诞JS没有扩展CSS，而是创建了一个Javascript库来生成CSS，而不直接接触CSS

---

CjsSS.js和ngCss采取了中间立场；你已经知道CSS，你已经知道Javascript，所以就让它们以一种简单、直观的方式一起工作吧。CjsSS.js可以在服务器端运行（通过Node.js）来预处理CSS，或者两者都可以在客户端运行。您还可以以混合方式运行，其中大多数变量都经过预处理，其余的都在客户端完成。

在CSS中嵌入JS的方法有很多种。请参阅，例如，出于性能/兼容性原因，您不应将JS放入CSS，但您不应假设黑客出于grahamparks链接的原因无法将JS放入CSS。

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

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