Question

首先，我知道 CSS表达式在很多方面都是不存在的，也是错误的，并且尽可能避免使用!important。这是special case stylesheet。

简而言之

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

E.g。这不起作用：

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

[编辑：感谢MarmaladeToday下面的评论]。这也行不通：

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

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

详细信息

我实际上要做的是模仿IE6中的inherit值＆amp; 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对象交互，因此，我想要实现的是不可能的 - 或者表达式是否有任何方式影响元素的属性，或者传递{ {1}}以其他方式？

开始赏金

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

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

至少，一些权威参考的链接告诉我这是不可能的，这意味着我可以放下这一思路 - 我没有看到任何提及使用inherit !important规则的CSS表达式的事情

Answer 1

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

E.g。如果你有一个带有链接的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声明）。所以JScript相当于!important。

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

事实上，也可以使用您组成的任何其他财产。这也有效：

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

但是，由于bogus属性实际上并不存在，因此无法使用Javascript重置它，因此将连续重新评估。

Answer 2

color：expression（'red'）！important;

Answer 3

你可以尝试the behavior property，它比表达更加通用。

试试这个，

inherit.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);
}

Answer 4

这听起来很恶心，但是：

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));

换句话说，这个：

立即返回"red"（或父颜色）。
设置超时后立即设置"red !important"（或其他）。

请注意，这可能最终会影响您的浏览器。我没有测试它，涉及CSS表达式的东西往往非常错误。

Answer 5

quirksmode令人尊敬的ppk已经对CSS，JavaScript和!important关键字做了一些工作。（请注意，要在Firefox或任何其他非IE浏览器中进行测试，请使用cssRules代替rules。

以下是链接：W3C DOM Compatibility

通过执行此操作，您可以显然读取样式表中的样式规则是否重要（这将获得第二个样式表中第二个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”的属性，它悬挂在DOM元素的style对象上。它甚至表明CSS表达式是可以的。用法是：

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

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

可以使用DHTML表达式代替前面的值。 As Internet Explorer 8，表达式在IE8模式下不受支持。对于更多信息，请参阅About Dynamic Properties。

同样可以查看ppk's tests of cssText。

我很遗憾没有在这台笔记本电脑上提供相关版本的Windows Microsoft Internet Explorer，但这可能有些用处。我很好奇这是怎么回事，这是我遇到的事情（在JavaScript中设置!important）但是找到了解决它的其他方法，通常只是转移类或通过使用ID来应用特异性相关选择器。

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

Answer 6

这是我的理解！重要的是这些日子很重要...特别是因为IE不认识它。

可以！在IE的CSS表达式中使用重要的规则吗？

简而言之

详细信息

开始赏金

6 个答案: