是否可以在 CSS 中使用 Javascript？
如果是，能举个简单的例子吗？
在 CSS 中使用 JavaScript
IT技术
javascript
css
2021-01-24 10:08:06
6个回答
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 文件main()在事件上执行函数ondocumentready（指 HTC 文档的就绪状态。）
XBL 与 Firefox
Firefox 支持类似的 XML 脚本执行黑客，使用 XBL。
像这样使用 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，它将在页面加载时立即执行。
我想您可能会想到的是expressions或“动态属性”，它仅受 IE 支持，并允许您将属性设置为 javascript 表达式的结果。例子：
width:expression(document.body.clientWidth > 800? "800px": "auto" );
此代码使 IE 模拟max-width它不支持的属性。
然而，考虑到所有事情，避免使用这些。他们是一件坏事，坏事。
根据您提供的信息，为了便于潜在地解决您的问题，我假设您正在寻找动态 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 的力量可以带来一些非常不可思议的东西。
不是“CSS 内部”这个短语的任何传统意义上的。
IE 支持 CSS表达式：
width:expression(document.body.clientWidth > 955 ? "955px": "100%" );
但它们不是标准的，也不能跨浏览器移植。如果可能，请避免使用它们。它们从 IE8 开始被弃用。