javascript - 在 CSS 中使用 JavaScript

Question

是否可以在 CSS 中使用 Javascript？

如果是，能举个简单的例子吗？

Answer 1

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

HTC 与 IE

像这样使用 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 文件在 ondocumentready 事件上执行 main() 函数(指的是 HTC 文档就绪。)

XBL 与 Firefox

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

像这样使用 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>

constructor 标签中的所有代码都将被执行(将代码包装在 CDATA 部分中是个好主意。)

在这两种技术中，除非 CSS 选择器匹配文档中的元素，否则代码不会执行。通过使用类似 body 的东西，它将在页面加载时立即执行。