Question

我使用一些函数在运行时获取特定的css规则

function getCSSRule(ruleName) {
var stylesheets = document.styleSheets;
for (var i=0; i < stylesheets.length; i++) {
    var rules = stylesheets[i].cssRules || stylesheets[i].rules;
    for (var j=0, rule; rule = rules[j++]; ) {
        if (rule.selectorText === '#title') {
            return rule;
        }
    }
}   
return false;
}

在ajax回调中使用这样的方法

var r = document.getElementsByClassName('#title')[0];
r.style.background = col;

它使我的cpu使用率达到100％。问题是当我尝试设置颜色时，而不是函数本身（？）任何建议将不胜感激。问题在于Chrome，在FF中没有问题，即使在IE6中工作也很好。

简单地说，这适用于Chrom，但具有高CPU使用率和一些其他意外（其他javascripts）行为。有线索吗？

var r = document.styleSheets[0].cssRules[10]; // acess by hand

r.style.border = "auto"; // modify something

Answer 1

function getCSSRule(ruleName) {
    var stylesheets = document.styleSheets;
    for (var i=0; i < stylesheets.length; i++) {
        var rules = stylesheets[i].cssRules || stylesheets[i].rules;
        for (var j=0, k=rules.length, rule; j < k; rule = rules[j++]; ) {
            if (rule.selectorText === '#title') {
                return rule;
            }
        }
    }   
    return false;
}

第二个for循环中缺少条件语句。您需要检查rules.length。

Answer 2

拉出我的头发后，我找到了另一个解决方案，非常简单并且跨浏览器。如果有人需要：）

<div id="menu" class="menu">
<a href="config.htm">Configuration</a>
<a href="status.htm">Status</a>
...
</div>

现在在css中，有2＆＃34; menu＆＃34;类，一个用于ON，一个用于OFF（仅用于检测在线和离线）。从javacript（以10mS的速率ajax回调）改变是完美的

if(Offline)
{   
  var elem = document.getElementById('menu');
elem.className = 'menudis';
}

chrome，javascript，getCSSrule可以节省100％的CPU时间

2 个答案: