在 css 文件中嵌入 JQuery 表达式？答案

【问题标题】：Embed a JQuery expression inside a css file?在 css 文件中嵌入 JQuery 表达式？
【发布时间】：2009-11-17 17:00:05
【问题描述】：

正如问题所暗示的，我可以在 css 文件中添加一个 JQuery 脚本作为表达式吗？或者类似的东西：

.parent{
    background-color: pink;
    position:relative;
    width: 100%;
}

.child{
    position: absolute;
    background: transparent url('./background.gif') no-repeat top right;
    /*height: 100%;*/
    height:  expression($(this).parent.height()+'px');
    width: 12px;

}

这个脚本的整个想法是解决 IE6 中 100% 的 div 高度。

【问题讨论】：

标签： jquery css expression

【解决方案1】：

你不能那样做。

您可以在页面加载时执行某种 javascript...（查找具有 100% 高度的元素并将其替换为父级高度的函数。）

【讨论】：

就像我说的，您可以在页面加载之后（或期间，但我不建议这样做）执行 javascript。我不知道 jQuery 是否有任何内置函数，但我个人使用这个函数：simonwillison.net/2004/May/26/addLoadEvent。然后，只需执行您在所有 .child 元素上编写的函数。（我相信你可以在 jQuery 中使用 $('.child') 获取这些元素。）

【解决方案2】：

在我尝试过的任何浏览器上都没有； CSS expressions 可能适用于 IE 6，但它们的速度并不快（链接如此说）。我认为问题在于 CSS 加载时间与 jQuery 选择器初始化时间。因此，您必须在 DOM 就绪代码上编写一些代码来选择所有需要设置其高度的元素，然后进行设置。

【讨论】：

【解决方案3】：

#element {
    height: expression((function(element) {
              var x = window.setInterval (function () {
                    if (document.readyState.search (/loaded|complete/) > -1) {
                      window.clearTimeout (x);
                      $(element).height($(element).parent.height())
                    }
                  }, 50);
            })(this));
}

让我解释一下：首先，表达式不好。按照 dlablin 的链接阅读原因。您应该考虑其他方法。如果必须，上述 sn-p 的工作方式如下：

在读取 CSS 后，首先计算表达式。这意味着，DOM 还没有准备好，jQuery 可能还没有加载。
将匿名函数设置为表达式，即刻执行。
此函数将当前元素作为element 传递给包含代码。
我们设置了一个间隔：每 50 毫秒检查一次，如果 DOM 准备好了。如果是，请清除间隔并运行 jQuery。

备注：如果您使用很多元素来执行此操作，这会真正降低您的页面速度。再次强调这一点：孩子们，不要在家里这样做！

【讨论】：