在CSS中使用Javascript

可以在CSS中使用Javascript吗

---

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

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

我想你可能会想到的是

表达式，或者，它们仅受IE支持，并允许你为javascript表达式的结果设置属性。例如：

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

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

但是，考虑到所有因素，避免使用这些
 IE支持CSS表达式：

但它们不是标准的，也不能跨浏览器移植。如果可能的话，尽量避免。它们已被弃用。
根据您提供的信息，为了有助于潜在地解决您的问题，我假设您正在寻找动态CSS。如果是这种情况，您可以使用服务器端脚本语言来执行此操作。例如（我绝对喜欢做这样的事情）：

styles.css.php：

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

正文
{
边际：0px；
字体系列：Verdana；
背景色：#中交；
背景图像：url（“”）；
}

这会将背景图像设置为$user\u 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的强大功能可以产生一些令人难以置信的东西。
IE和Firefox都包含从CSS执行JavaScript的方法。正如Paolo提到的，IE中的一种方法是
表达式
技术，但也有更模糊的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>

在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>


警报（“已执行XBL脚本”）；

构造函数标记中的所有代码都将被执行（最好将代码包装在CDATA部分中）

在这两种技术中，除非CSS选择器匹配文档中的元素，否则代码不会执行。通过使用类似于
body
，它将在页面加载时立即执行。
这是一个非常有趣的问题。设置了100多个属性，您可能会认为您可以输入
.可单击{onclick:“警报（'hi！'）；”；}
在你的CSS中，它会起作用。这很直观，很有道理。这在猴子修补动态生成的大规模UI时会非常有用

问题：

CSS警察以其无穷的智慧在表现和行为之间画了一道中国墙。在CSS故意不支持的内容上正确标记的任何HTML。（）

解决这个问题的最好方法是使用jQuery，它在后台设置了一个解释引擎来执行您试图用CSS执行的操作。见本页：

祝你好运。
我遇到了类似的问题，并开发了两个独立的工具来实现这一点：


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


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



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

/*
var mainColor=“#CCCC”；
*/
身体{
颜色：/*{{mainColor}}*/；
}

在您的on page
style
属性中：

废话

或

废话

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

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

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


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


看到了同样的问题，并朝着与上述预处理器完全相反的方向前进；荒诞JS没有扩展CSS，而是创建了一个Javascript库来生成CSS



CjsSS.js和ngCss采取了中间立场；你已经知道CSS，你已经知道Javascript，所以让它们以一种简单直观的方式一起工作吧。
关键部分是“仅受IE支持”；除非css文件是通过条件注释包含的，否则应该避免。在任何情况下都应该避免：注意，标准模式IE8也不支持css中的表达式。“仅受IE支持”。。。我退出了。下面的一些建议提到了Internet Explorer中的表达式-确保不要使用这些。IE中的表达式是邪恶的-它们在每个事件（mousemove，有人？）上都会重新评估。因此，在IE以外的任何地方，他们都会默默地失败，在IE中，他们会大大降低页面速度。投票支持coolness，但这是服务器端。
<?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>