2

（仅限 Chrome）我正在尝试在运行时修改与媒体查询相关的 CSSRules，但是，当我修改规则时，文档不会重新呈现。仅当媒体查询再次更改时，文档才会重新呈现。如果你看一下小提琴，你会注意到在加载时，元素是深色的，而它应该立即变成红色。有没有办法让文档使样式无效？

如果您将浏览器窗口移动得更小，您会看到样式更改成功，然后再次变大，这样媒体查询样式就会两次失效。

小提琴：http: //jsfiddle.net/QNgxk/3/

编辑：有时小提琴有效？？？哎呀

代码：

HTML

<div id="test">I SHOULD BE RED</div>

CSS

#test {
    position: absolute;
    width:    100%;
    background-color: #333;
    height:   50px;
}

@media screen and (min-width: 481px) {
    #test {
        width: 50%;
    }
}

JS

var test = document.getElementById('test');   // get the element
var rules = window.getMatchedCSSRules(test);  // get matched rules
var regexp = new RegExp('^#test');            // test the CSS rule explicit id
var matchedRule;
for (var i = rules.length - 1; i >= 0; i--) { // loop through rules and find the explicit one
    var rule = rules[i];
    if (rule.cssText.match(regexp)) {
        matchedRule = rule;
        break;
    }
}

// now change the rule to have a background of red, and width 20%
if (matchedRule) {
    matchedRule.style.setProperty('background-color', '#f00');
    matchedRule.style.setProperty('width', '20%');
}
4

1 回答 1

1

我有一个类似的问题，我只是在这里写这个，以防它可能对其他人有帮助。对我来说，匹配规则的测试是不正确的。在 FireFox 中，它的作用与 selectorText 一样，正如它在样式表中所写的那样，但 Chrome 会将所有名称转换为小写。所以这个测试在 Chrome 中不匹配：

if(theRules[i].selectorText == ".myRule pre"){

将在 FireFox 中匹配，但 Chrome 将选择器文本更改为小写，因此：

.myrule pre

所以把代码改成这样：

if(theRules[i].selectorText.toLowerCase() == ".codemirror pre"){

修复了该问题，使其适用于两种浏览器。顺便说一句，setProperty 在 Chrome 30 中对我有用。我使用它的原因是因为它允许指定重要的：

theRules[i].style.setProperty("font-size", this.editorFontSize+"px", "important");

希望这可以帮助。

于 2013-10-17T15:35:01.717 回答