Javascript 有没有办法找到适用于网页的所有全局样式？

作为一家公司，我们使用组件（Angular、Vue和React）来构建我们的应用程序，但我们仍然拥有大量从遗留应用程序继承的全局样式

例如：

将应用于页面上任何具有活动类的元素

---

在浏览器中是否有方法生成适用于页面的所有全局（即非命名空间）样式规则的列表，请记住这些规则可能存在于第三方库中，或其他杂项遗留JavaScripts？

评估当前页面CSS样式的唯一选项是使用

document.styleSheets

。它将返回

CSSStyleSheet

s的列表

您需要关注

document.styleSheets[n].cssRules

，其中

n

等于要计算的样式表。这将为您提供该样式表应用的所有样式的列表。每个样式表都有一个

cssText

和一个

selectorText

属性

如果您只是想循环查找哪些样式是“无名称空间”的，您可能只需要使用

selectorText

属性

下面是一些关于

document.styleSheets

的信息

以下是一个示例（按“运行代码片段”查看结果）：

var选择器=[]；
var sheets=Array.from（document.styleSheets）；
表.forEach（功能（表）{
//出于安全原因，只有来自同一源域的样式表才会公开“cssRules”
试一试{
var规则=Array.from（sheet.cssRules）；
rules.forEach（函数（规则）{
selectors.push（rule.selectorText）；
});
}捕获（e）{
//如果需要，可以使用外部样式表
}
});
控制台日志（选择器）

样式表
.你好，世界{
背景：url（none.gif）；
}
傅先生{
背景：url（none.gif）
}
.酒吧{
背景：url（none.gif）；
}
我不确定这是否有用，但试试看。如果您使用的是Chrome，请尝试以下操作：

检查（打开开发人员工具）>审核（选项卡）>选择“审核当前阶段”>单击“运行”

Chrome将显示所有未使用的CSS规则

编辑：

也值得一试：检查（打开开发者工具）>点击“控制台”选项卡>覆盖范围旁边的3个垂直点

它将显示加载的CSS/JS文件列表，并将突出显示哪些行已使用（绿色）和未使用（红色）

尝试使用此脚本获取所有选择器的内部和外部样式表


for（var i=0；i
var规则r=[]；
var styles=document.styleSheets；
对于（i=0；i@NikhilGhuse请先阅读问题？这可能会对您有所帮助吗？您可以尝试使用
文档。样式表
当您说“无名称空间”时，您是指不包含来自其他库的名称的选择器？还是指不包含
或
@名称空间
的选择器？您所指的是什么“无名称空间“？你能澄清一下吗？或者举个例子吗？@superluminary这似乎应该是公认的解决方案。这个答案对你的问题有什么不合适的地方吗？不，这是最重要的答案。悬赏在到期前很快就会有特写，所以我通常会把它保留到最后，以便为每个人获得最大的价值。”。
.active {
  background: red;
}

    var rulesArr = [];
    var styles = document.styleSheets;

    for ( i=0; i<styles.length; i++ ){
      //iterate styleSheets.

      if(styles[i].rules){
      //Must be a rule to continue.

        for ( x=0; x<styles[i].rules.length; x++ ){
        //iterate rules, an object in styleSheets.

        rulesArr.push(styles[i].rules[x].selectorText);
        //appends selectorText i.e. css class names to our variable.
        }
      }
    }
    console.log(rulesArr);