javascript - 在 JavaScript 中遍历所有样式表和类是个好主意吗？

Question

我在 ASP.Net WebForms 页面(即 aspx 页面)中有一个 JavaScript 函数，代码如下所示。

代码实现了我在我的应用程序中需要的逻辑，即找到一个 css 类，但我担心如果有很多样式表/类，那么可能会有太多的迭代导致客户端性能下降。

在此代码中，首先获得所有样式表，然后为每个样式表获得所有类，然后迭代这些类以找到给定的类。

问题:当样式表/类太多时，这种对性能缓慢的担忧是否有效？如果是，是否有使用 JavaScript 查找 css 类的更快方法？

function getStyle(className) {

var styleSheets = document.styleSheets;
var styleSheetsLength = styleSheets.length;
for (var i = 0; i < styleSheetsLength; i++) {
    var classes = styleSheets[i].rules || styleSheets[i].cssRules;
    var classesLength = classes.length;
    for (var x = 0; x < classesLength; x++) {
        if (classes[x].selectorText === undefined) {
            continue;
        }
        if (classes[x].selectorText == className || classes[x].selectorText.indexOf(className) >= 0) {
            if (classes[x].cssText) {
                return classes[x].cssText;
            } else {
                return classes[x].style.cssText;
            }
        }
    }
  }
}

更新 1

我在我的应用程序中提供了一些代码来说明上述 JavaScript 方法的使用。我无法控制正在使用哪些类，因为它们来自 ASP.Net 页面中的某些第三方控件。

 if ("none" === getStyleAttribute(getStyle(".rwDialog"), "background-image")) {
                        allDivs[i].style.paddingLeft = "5px";
                    }

Answer 1

使用非常长的我认为通过支持字符串和东西来防止万无一失您可以尝试正则表达式:

function getItem(selector, item, sheet) {
    var group    = sheet.substr(sheet.indexOf(selector)).match(/{(?:(["'])((?:(?=(?:\\)*)\\.|.)*?)\1|[\s\S])*?}/)[0];
    return group.substr(group.indexOf(item)).match(/\s*:\s*((?:(?=(["'])((?:(?=(?:\\)*)\\.|.)*?)\1).*|.)*?);/)[1].trim();
}

现在把它放在文档的最开头:

function loadStyleSheets(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            callback(xhr.responseText);
        }
    };
    xhr.open("GET", url);
    xhr.send();
}

现在:

loadStyleSheets("path/to/style/sheet", function (text) {
    alert(getItem('.class1', 'background-image', text));
});