9

首先，我知道CSS 表达式在很多方面都已失效和错误，并且!important尽可能避免使用。这是针对特殊情况的样式表。

简而言之

我的问题是......有没有办法让 CSS 表达式设置!important标志？

例如，这不起作用：

a { color:expression('red !important'); }

[编辑：感谢 MarmaladeToday 下面的评论]。这也不起作用：

a { color:expression('red') !important; }

这可以通过其他方式完成吗？

详细地

我实际上想要做的是模仿inheritIE6 和 7 中的值。这有效：

color:expression(
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
    );

但我也想设置!important标志，这不起作用：

color:expression(
  (
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
  ) + ' !important');

我知道，在 JavaScript 中，不可能!important通过元素的style对象进行设置。例如，这不起作用：

element.style.color = 'red !important';

但是，可以!important通过元素的style 属性进行设置：

element.setAttribute('style', 'color:red !important;');

那么...... CSS表达式是否仅限于与style对象交互，因此，我想要实现的目标是不可能的 - 或者表达式是否有任何方式影响元素的属性，或!important以其他方式传递？

开始赏金

到目前为止还没有可靠的答案，所以我开始赏金了。

理想情况下，我正在寻找一种基于 CSS 的解决方案，用于inherit !important在 IE6 和 IE7 中进行模仿，无论有无 CSS 表达式。（请在发布之前验证您的建议是否有效）。

至少，一个指向一些权威参考的链接告诉我这是不可能的，这意味着我可以放下这个思路——我没有看到任何提到在!important规则中使用 CSS 表达式的东西。

4

6 回答 6

3

这些 CSS 表达式不起作用的原因是 IE 只计算级联中最后一个属性的表达式。

例如，如果你有一个 HTML 文档，里面有一个链接和下面的“CSS”，

a {
    color: expression(function(e){
        alert('success');
        e.runtimeStyle.color = 'blue';
    }(this));
}
a { color: red; }

您将永远不会看到该警报（不要介意样式更改），因为从未评估过 CSS 表达式。所以不，你不能使用表达式来设置!important标志。

也就是说，不是当您尝试将其设置在同一属性上时。你可以作弊。但这确实使表达式更加复杂：

a {
    filter: expression(function(e){
        e.runtimeStyle.color = 'blue';
        alert('success');
        e.style.filter = '';
    }(this));
}
a { color: red; }

这里有几点需要注意。

如果您只是使用另一个 CSS 属性，则可以确定表达式将被计算。或者至少，更确定一点，因为如果在级联的后面还有另一个规则已经使用了相同的属性，那么你仍然不走运。

其次，您必须使用runtimeStyle而不是currentStyle. 如果你currentStyle在这里使用，第二条规则仍然会覆盖它。runtimeStyle覆盖所有其他 CSS（除了!important声明）。所以它是 .js 的 JScript 等价物!important。

另请注意，我也在重置filter属性本身。这可以防止表达式被不断地重新评估。但是，尽管这可能会降低性能，但我认为这不是超级关键。我把它放在这里的主要原因是因为我alert()在这些表达式中添加了 s，你绝对不想让那些永远弹出。

事实上，您也可以使用任何其他属性。这也有效：

a {
    bogus: expression(function(e){
        e.runtimeStyle.color = 'blue';
    }(this));
}

但是，由于该bogus属性实际上并不存在，因此您无法使用 Javascript 对其进行重置，因此将不断对其进行重新评估。

于 2009-10-31T21:18:49.497 回答
2

颜色：表达式（'红色'）！重要；

于 2009-10-16T14:43:26.123 回答
2

你可以试试behavior 属性，它比表达式更通用。

试试这个，

继承.htc：

<SCRIPT language="JScript">
    //add your own inheritance logic here, you can use element.parentNode etc.
    var prop = element.currentStyle.behaviorProp;//specified in stylesheet
    var val = element.currentStyle.behaviorValue;//specified in stylesheet
    element.style[prop] = val;//set as inline style, you can also use setAttribute here.
</SCRIPT>

CSS：

body #div1 {
    color:blue;
}

#div1 {
    color:red;/*stays blue, because 'body #div1' is more specific*/
    behaviorProp:color;/*specify styleproperty for the .htc*/
    behaviorValue:green;/*WILL become green, because the .htc sets it as an inline style, which has priority.*/
    behavior:url(inherit.htc);
}
于 2009-10-29T20:57:05.203 回答
1

这听起来很恶心和邪恶，但是：

color: expression((function (_this) {
    window.setTimeout(function () {
        _this.setAttribute("style", "color:" +
            (_this.parentNode.currentStyle ?
                _this.parentNode.currentStyle.color : 'red') + " !important";
    }, 0);
    return _this.parentNode.currentStyle ?
        _this.parentNode.currentStyle.color : 'red';
})(this));

换句话说，这：

  1. 立即返回"red"（或父颜色）。
  2. 设置将在之后立即设置"red !important"（或其他）的超时。

请记住，这可能最终会占用您的浏览器。我没有测试它，涉及 CSS 表达式的东西往往会出错。

于 2009-10-19T13:01:06.233 回答
1

quirksmode的古老 ppk在 CSS、JavaScript 和!important关键字上做了一些工作。（请注意，在 Firefox 或任何其他非 IE 浏览器中进行测试时，请使用下面cssRules的代替rules。

这是链接：W3C DOM 兼容性

您显然可以通过这样做来阅读样式表中的样式规则是否重要（这将获得第二个样式表中第二个 css 规则中颜色属性的重要性级别，在除 MICROSOFT INTERNET EXPLORER 之外的所有浏览器中。这对于一个无赖.

document.styleSheets[1].rules[1].style.getPropertyPriority('color')
//Returns important when the style is marked !important.
//Returns an empty string otherwise.

现在，他的研究揭示了另一种设置方式!important，不幸的是，这显然也只适用于非 Internet Explorer 浏览器

// where x is a DOM element
x.style.setProperty('color','#00cc00','!important');
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00','!important');

显然，这种奇怪的语法，如果您不将事物设置为!important，则需要将第三个参数设置为null：

// where x is a DOM element
x.style.setProperty('color','#00cc00',null);
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00',null);

现在，MSDN 有一个名为“ cssText”的属性，它悬挂在styleDOM 元素的对象上。它甚至表明 CSS 表达式是可以的。用法是：

x.style.cssText = 'color: #00cc00 !important';

现在，这可能很重要（呵呵），MSDN 页面说（强调我的）：

DHTML 表达式可以用来代替前面的值。从 Internet Explorer 8 开始，IE8 模式不支持表达式。有关详细信息，请参阅关于动态属性。

查看ppk 对 cssText 的测试也可能是值得的。

不幸的是，我在这台笔记本电脑上没有可用的 Windows Microsoft Internet Explorer 的相关版本，但也许这有点用处。我很好奇这是如何摆脱的，这是我会遇到的（!important在 JavaScript 中设置），但找到了其他方法来解决它，通常只是在类中移动或通过在相关选择器中使用 ID 来应用特异性。

祝你在一个有趣的问题上好运！

于 2009-10-31T06:07:44.600 回答
-3

我的理解是 !important 主要是这些天作为一个黑客......特别是因为 IE 不识别它。

于 2009-10-16T16:50:07.007 回答