Question

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

Answer 1

You can，但你真的不应该这样做。而是使用恰好与您使用的CSS文件对应的单独脚本文件。也许会问另一个问题，在那里你列出了一个特定的场景，你正试图解决一个特定的问题，我们可以告诉你通常用来解决它的做法。

Answer 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" />

并在你的styles.php中看起来像CSS文件，但有一些例外：

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

Answer 3

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

CjsSS.js是一个支持回IE6的Vanilla Javascript工具（因此没有外部依赖项）。
ngCss是Angular模块+过滤器+工厂（又名：插件），支持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看到了与预处理器相同的问题，并且完全相反;而不是扩展CSS，AbsurdJS创建了一个Javascript库来生成CSS而不直接触摸CSS。

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

将Javascript放入CSS

3 个答案: