在CSS中使用Javascript

Question

是否可以在CSS中使用Javascript？

如果是,你能给出一个简单的例子吗？

Answer 1

IE和Firefox都包含从CSS执行JavaScript的方法.正如Paolo所提到的,IE中的一种方式是expression技术,但也有更模糊的HTC行为,其中包含脚本的单独XML通过CSS加载.使用XBL存在类似的Firefox技术.这些技术不能直接从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文件执行main()事件的功能ondocumentready(参考HTC文档的准备情况.)

XBL与Firefox

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选择器与文档中的元素匹配,否则代码不会执行.通过使用类似的东西body,它将在页面加载时立即执行.

Answer 2

我想你可能会想到的是expressions还是"动态属性",这是仅支持IE,让您有一个属性设置为一个javascript表达式的结果.例:

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

此代码使IE模拟max-width它不支持的属性.

但是,所有考虑因素都避免使用这些.他们是坏事,坏事.

Answer 3

根据您提供的信息，为了便于潜在地解决您的问题，我假设您正在寻找动态 CSS。如果是这种情况，您可以使用服务器端脚本语言来执行此操作。例如（我非常喜欢做这样的事情）：

样式.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 的力量可以带来一些非常不可思议的东西。

Answer 4

不是任何传统意义上的“CSS 内部”短语。