在CSS中使用Javascript

Question 1

是否可以在CSS中使用Javascript？

如果是，您可以举一个简单的例子吗？

Question 2

IE和Firefox都包含从CSS执行JavaScript的方法。正如Paolo所提到的那样，IE中的一种方法是该expression技术，但HTC行为也更加晦涩难懂，即通过CSS加载包含脚本的单独XML。存在使用XBL的Firefox类似技术。这些技术不会直接从CSS中提取JavaScript ，但效果是相同的。

带有IE的HTC

使用如下CSS规则：

body {
  behavior:url(script.htc);
}

在该script.htc文件中具有以下内容：

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

HTC文件main()在事件上执行功能ondocumentready（指HTC文档的准备情况。）

Firefox的XBL

Firefox使用XBL支持类似的XML脚本执行黑客。

使用如下CSS规则：

body {
  -moz-binding: url(script.xml#mycode);
}

在您的script.xml中：

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

构造器标记中的所有代码都将执行（将代码包装在CDATA部分中的好主意。）

在这两种技术中，除非CSS选择器与document中的元素匹配，否则代码都不会执行。通过使用body，它会在页面加载后立即执行。

Question 3

我认为您可能会想到的是“动态属性”expressions或“动态属性”，它们仅受IE支持，并允许您将属性设置为javascript表达式的结果。例：

width:expression(document.body.clientWidth > 800? "800px": "auto" );

这段代码使IE仿真max-width它不支持的属性。

但是，考虑到所有问题，请避免使用这些。他们是一件坏事，一件坏事。

Question 4

为了方便您根据所提供的信息来解决您的问题，我假设您正在寻找动态CSS。在这种情况下，您可以使用服务器端脚本语言。例如（我绝对喜欢做这样的事情）：

styles.css.php：

body
 {
margin: 0px;
font-family: Verdana;
background-color: #cccccc;
background-image: url('<?php
echo 'images/flag_bg/' . $user_country . '.png';
?>');
 }

这会将背景图片设置为$ user_country变量中存储的内容。这只是动态CSS的一个例子。将CSS和服务器端代码组合在一起时，几乎有无限可能。另一种情况是做类似的事情，例如允许用户创建自定义主题，将其存储在数据库中，然后使用PHP设置各种属性，例如：

user_theme.css.php：

body
 {
background-color: <?php echo $user_theme['BG_COLOR']; ?>;
color: <?php echo $user_theme['COLOR']; ?>;
font-family: <?php echo $user_theme['FONT']; ?>;
 }

#panel
 {
font-size: <?php echo $user_theme['FONT_SIZE']; ?>;
background-image: <?php echo $user_theme['PANEL_BG']; ?>;
 }

再说一次，这只是头等大事。通过服务器端脚本利用动态CSS的功能可能会导致一些令人难以置信的事情。

Question 5

IE支持CSS表达式：

width:expression(document.body.clientWidth > 955 ? "955px": "100%" );

但它们不是标准的，并且不能跨浏览器移植。尽可能避免使用它们。从IE8开始不推荐使用它们。

Question 6

没有任何常规意义上的“内部CSS”一词。

Question 7

原来这是一个非常有趣的问题。设置了一百多个属性后，您会认为可以键入.clickable {onclick：“ alert（'hi！'）;” ; }，这样就可以了。它很直观，很有意义。在猴子修补动态生成的大量UI时，这将非常有用。

问题：
CSS警察以其无穷的智慧在演讲和行为之间划下了一道中国墙。CSS故意不支持任何正确标记为on-on的HTML。（完整属性表）

解决此问题的最佳方法是使用jQuery，它会在后台设置一个解释引擎以执行您试图对CSS进行的操作。参见本页：将Javascript Onclick添加到.css文件。

祝好运。

Question 8

我遇到了类似的问题，并开发了两个独立的工具来完成此任务：

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

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

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

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

这在您的页面style属性中：

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

要么

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

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

默认情况下，Javascript是在沙盒IFRAME中执行的，但是由于您编写了自己的CSS并将其托管在自己的服务器上（就像* .js文件一样），因此XSS不会成为问题。但是沙盒提供了更多的安全性和安心感。

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

LESS，SASS和Stylus都是预处理器，它们要求您学习新的语言并修改CSS。基本上，他们使用新的语言功能扩展了CSS。所有这些都仅限于为每个平台开发的插件，而CjsSS.js和ngCss都允许您<script src='blah.js'></script>直接在CSS中包括任何Javascript库！
AbsurdJS看到了同样的问题，并朝着与上述预处理器完全相反的方向前进。AbsurdJS并未扩展CSS，而是创建了一个Javascript库来生成CSS。

CjsSS.js和ngCss处于中间地位；您已经了解CSS，也已经了解Javascript，因此只需让它们以简单，直观的方式协同工作即可。