Question

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

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

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

问题：当样式表/类太多时，这种关于慢性能的问题是否有效？如果是，是否有更快的方法可以使用JavaScript查找css类？

Sub InsertSheet(name As String)
Dim i
    For i = 1 To ActiveWorkbook.Sheets.Count
        If ActiveWorkbook.Sheets(i).name >= name Then
            Exit For
        End If
    Next i
    ActiveWorkbook.Sheets("Template").Copy before:=ActiveWorkbook.Sheets(i)
    ActiveSheet.name = name ' can fail if sheet already exists
End Sub

更新1

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

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

Answer 1

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

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

var rwDialogElement = ...;
window.getMatchedCSSRules(rwDialogElement);

Answer 2

使用非常长的我认为通过支持字符串和内容来实现万无一失 RegExs你可以尝试：

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

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

2 个答案: