Question

是否有一种方法或工具可用于获取css文件中包含的所有类/ ID的名称列表？

我需要构建所有css类/ id的xml映射，对于包含数千种样式的css文件，手动执行它是非常繁琐的。

Answer 1

将您的css文件包含在任何html文件中。
在控制台中执行以下代码：

Array.prototype.forEach.call（document.styleSheets [0] .cssRules，函数（）{的console.log（a.selectorText）}）
在控制台中将列出样式表中使用的所有css标记。

Answer 2

您可以迭代document.styleSheets来获取每个样式表，然后遍历规则以查找与类或ID选择器匹配的所有内容。以下是一种提供一般方法的简单方法，从规则中获取类和ID的正则表达式需要更多的工作。

function getClassesAndIds() {
  var sheet, sheets = document.styleSheets;
  var rule, rules;
  var classes = [];
  var ids = [];
  var temp;

  for (var i=0, iLen=sheets.length; i<iLen; i++) {
    sheet = sheets[i];
    rules = sheet.rules;

    for (var j=0, jLen=rules.length; j<jLen; j++) {
      rule = rules[j];

      // Get the classes
      temp = rule.cssText.match(/\.\w+/g);

      if (temp) {
        classes.push.apply(classes, temp);
      }

      // Get the IDs
      temp = rule.cssText.match(/\#\w+/g);

      if (temp) {
        ids.push.apply(ids, temp);
      }
    }
   }
  // Return an array of the class and ID arrays
  return [classes,ids];

  // or as an object
  // return {classes:classes, ids:ids};
}

window.onload = function() {
  console.log(getClassesAndIds());
};

从记忆中，旧的IE中存在一些关于表格和规则的怪癖，但现在它却躲避了我......

获取css文件中包含的所有类/ ID的名称？

2 个答案: