在 CSS 中使用 Javascript

Posted 2023-02-23

【中文标题】在 CSS 中使用 Javascript

【英文标题】：Using Javascript in CSS

【发布时间】：2010-10-03 08:10:15

【问题描述】：

是否可以？

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

【问题讨论】：

下面的一些建议提到了 Internet Explorer 中的表达式 - 一定不要使用这些。

IE 中的表达式是邪恶的——它们在每一个事件中都会被重新评估（mousemove，有人吗？）。因此，在非 IE 的任何地方，它们都会默默地失败，在 IE 中，它们会大大降低页面速度。

【参考方案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>

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

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

【讨论】：

（不确定询问旧答案是否有帮助）我在 Firefox 18 中尝试了 XBL 技术，但没有成功。是否只有 Firefox 扩展可以访问？

另外值得注意的是，IE after version 10 不支持 HTML 组件

截至 2016 年，XBL can not 通过 HTTP 加载。

@JSmyth ꜰᴛᴘ 和数据 ᴜʀɪ 怎么样？

Firefox 不再支持 XBL，它已从 Gecko 中删除，截至 2019 年 10 月：bgrins.github.io/xbl-analysis

【参考方案2】：

我想您可能想到的是expressions 或"dynamic properties"，它们仅受IE 支持，并允许您将属性设置为javascript 表达式的结果。示例：

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

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

考虑到所有因素，避免使用这些。 They are a bad, bad thing.

【讨论】：

关键部分有'仅受IE支持'；除非通过条件注释包含该 css 文件，否则应避免使用。

无论如何都应该避免：developer.yahoo.com/performance/rules.html#css_expressions

还要注意标准模式 IE8 也不支持 CSS 中的表达式。

'只有 IE 支持'...我出去了。

【参考方案3】：

根据您提供的信息，为了便于潜在地解决您的问题，我假设您正在寻找动态 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 的力量可以产生一些非常不可思议的东西。

【讨论】：

投票支持酷，但这是服务器端的。 JS 是客户端。

确保通过发送一些标头来启用缓存，否则会不必要地减慢页面加载速度。

这是静态的。它所做的只是消耗可以使用 javascript 延迟到客户端的服务器资源。

【参考方案4】：

不是传统意义上的“在 CSS 中”。

【讨论】：

时间越长这个答案越好。

来自未来的问候

【参考方案5】：

IE 支持 CSS 表达式：

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

但它们不是标准的，不能跨浏览器移植。如果可能，请避免使用它们。它们已被弃用 since IE8。

【参考方案6】：

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

CjsSS.js 是一个支持回到 IE6 的 Vanilla Javascript 工具（因此没有外部依赖项）。

ngCss 是一个 Angular Module+Filter+Factory（又名：插件），支持 Angular 1.2+（所以回到 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，所以只需让它们以简单、直观的方式协同工作。

【参考方案7】：

这是一个非常有趣的问题。设置了一百多个属性，你会认为你可以输入 .clickable onclick : "alert('hi!');" ; 在你的 CSS 中，它会工作。它很直观，很有意义。这在猴子修补动态生成的大量 UI 中将非常有用。

问题： CSS 警察以其无穷的智慧，在 presentation 和 behavior 之间划出了一道中国墙。 CSS 故意不支持任何正确标记的 HTML。 (Full Properties Table)

解决这个问题的最好方法是使用 jQuery，它会在后台设置一个解释引擎来执行您尝试使用 CSS 执行的操作。请参阅此页面： Add Javascript Onclick To .css File.

祝你好运。

【讨论】：

这个答案是不正确的，并且没有为它声称将 Javascript 放在 CSS 中是不可能的提供任何解释/理由。事实上，其他较早的答案 do 提供了将 Javascript 放入 CSS 中的方法（不可移植，许多浏览器不支持，但在某些情况下是可能的）。跨度>