在 JavaScript 中循环遍历所有样式表和类是个好主意吗?

Is looping through all style sheets and classes a good idea in JavaScript?

本文关键字：好主意 样式 JavaScript 循环 遍历      更新时间：2023-09-26

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

该代码实现了我在应用程序中所需的逻辑，即查找 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";
                    }

使用很长的时间，我认为通过支持字符串和正则表达式来万无一失，您可以尝试：

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

原则上这是一个坏主意，因为它依赖于自定义"解析"。

相反，我建议使用内置的内省方法，例如：

var rwDialogElement = ...;
window.getMatchedCSSRules(rwDialogElement);
相关文章：