可以IE的CSS表达式中应该使用哪些重要规则?

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

例如,如果您有一个HTML文档,其中包含一个链接和以下“CSS”,

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

!important 旗帜

也就是说,当您尝试将其设置在同一属性上时,情况并非如此。你可以作弊。但这确实让表达变得有点复杂:

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

这里有几件事需要注意。

进行评估。或者至少,更确定一点,因为如果在级联的后面有另一个规则已经使用了相同的属性,那么您仍然运气不佳。

runtimeStyle 而不是 currentStyle . 如果你用 当前样式 运行时方式 除了 声明 ). 所以它是JScript的等价物 !重要的 .

还要注意,我正在重置 filter alert() 在那些表达中有什么,你呢 肯定

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

但是, bogus 属性实际上不存在,您无法使用Javascript重置它,因此 必须不断地重新评估。

颜色:表达式('red')!重要的;

你可以试试 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);
}

这听起来既恶心又邪恶,但是:

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表达式的东西往往会出现严重错误。

可敬的巴基斯坦人民党 quirksmode 在CSS、JavaScript和 !important 关键词(请注意,对于Firefox或任何其他非IE浏览器中的测试,请使用 cssRules 而不是 rules 在下面

W3C DOM Compatibility

通过这样做,您显然可以了解样式表中的样式规则是否重要(这将获得第二个样式表中第二个css规则中颜色属性的重要性级别, 对一个流浪汉来说怎么样。

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

现在,他的研究揭示了另一种解决问题的方法 !重要的

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

显然,这种奇怪的语法,如果你没有设置为 ,需要将第三个参数设置为 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 style DOM元素的对象。它甚至表明CSS表达式还可以。用法是:

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

现在,这可能很重要(嘿),MSDN页面说(我的重点):

可以使用DHTML表达式代替前面的值。 有关详细信息,请参阅 About Dynamic Properties .

ppk's tests of cssText 也

不幸的是,我没有在这台笔记本电脑上提供相关版本的Windows Microsoft Internet Explorer,但这可能有一些用处。我很好奇这是怎么发生的,这是我遇到的(背景) !重要的 但是找到了其他方法来绕过它,通常只是通过在相关选择器中使用ID来转移类或应用特定性。

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

这是我的理解!重要的是现在作为一个黑客。。。特别是因为IE不认识它。