代码之家 › 专栏 › 技术社区 › superluminary

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

css javascript

superluminary · 技术社区 · 8 年前

作为一家公司,我们使用组件(Angular、Vue和React)来构建我们的应用程序,但我们仍然从遗留应用程序中继承了大量的全球风格。

如:

.active {
  background: red;
}

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

有没有办法在浏览器中生成一个适用于页面的所有全局(即非命名空间)样式规则的列表,记住这些规则可能存在于第三方库或其他各种遗留Javascript中?

4 回复 | 直到 8 年前

pseudosavant 8 年前

评估当前页面的CSS样式的唯一选项是使用 document.styleSheets . 它将返回一个 CSSStyleSheet s

你要专注于 document.styleSheets[n].cssRules 哪里 n 等于要计算的样式表。这将为您提供该样式表应用的所有样式的列表。每个样式表都有一个 cssText 和a selectorText 所有物

如果您只是想循环查找哪些样式是“非命名空间”的,您可能只需要使用 选择文字 属性。

这里有一些 more information on MDN 关于 文件样式表 .

下面是一个示例(按“运行代码段”查看结果):

var selectors = [];

var sheets = Array.from(document.styleSheets);

sheets.forEach(function(sheet) {
  // Only Stylesheets from a same-origin domain expose `cssRules` for security reasons
  try {
    var rules = Array.from(sheet.cssRules);
    rules.forEach(function(rule) {
      selectors.push(rule.selectorText);
    });
  } catch (e) {
    // Do something with external stylesheets if you want
  }
});

console.log(selectors);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Stylesheets</title>
  <style>
    .hello-world {
      background: url(none.gif);
    }
  </style>
  <!-- Won't work as it is not a same-original stylesheet -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <style>
    .foo {
      background: url(none.gif)
    }
    
    .bar {
      background: url(none.gif);
    }
  </style>
</body>

</html>

evilReiko 8 年前

我不确定这是否有用,但试试看。如果您正在使用Chrome,请尝试以下操作:

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

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

编辑:

也值得一试:检查(打开开发者工具)>单击“控制台”选项卡旁边的3个垂直点>新闻报道

它将显示加载的CSS/JS文件列表,并突出显示哪些行已使用(绿色)和未使用(红色)。 Read More

Community Mohan Dere 6 年前

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

for(var i=0; i<document.styleSheets.length; i++) {
   var s = document.styleSheets[i];
   for(var j=0; s.cssRules && j<s.cssRules.length; j++) {
      var c = s.cssRules[j];
      console.log(c.selectorText);
   }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.test{color:red;}
</style>

要获得元素的最终应用CSS属性,请使用Javascript尝试以下操作

通过使用 getComputedStyle() 可以在元素上应用精确的计算最终样式。

这个 Window.getComputedStyle() 方法在应用活动样式表并解析这些值可能包含的任何基本计算之后,给出元素的所有CSS属性的值。

返回的样式是一个活动的CSSStyleDeclaration对象,当元素的样式更改时,该对象会自动更新自身。

var elem = document.getElementsByClassName("active")[0];
var background = window.getComputedStyle(elem, null).getPropertyValue("background-color"); 
var color = window.getComputedStyle(elem, null).getPropertyValue("color"); 
console.log(background);
console.log(color);

.active{background-color:blue;color:white;}

<div class="active">
some text
</div>

裁判: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Devin 8 年前

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