Question

从页面中考虑以下HTML摘录：

<style type="text/css">
.existing-class {
  background-color: #000;
}
</style>
<div class="existing-class non-existing-class"></div>

它有2个类。事情如下：non-existing-class未在页面中可用的CSS中定义，但div正在使用它。

我的问题是：开发人员如何以编程方式检测页面中正在使用未在加载的CSS中实际定义的类的元素？

Answer 1

好的，你去;）
看看我创建的脚本，尤其是getUndefinedClasses函数。

function httpGet(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
  xmlHttp.send( null );
  return xmlHttp.responseText;
}


function getAllCSSClasses(cssdata) {
  var re = /\.(.+)\{/g;
  var m;
  let classes = [];
  do {
    m = re.exec(cssdata);
    if (m) {
      for(let key in m) {
        if(
           (typeof m[key] == "string") && 
           (classes.indexOf(m[key]) == -1) &&
           (m[key].indexOf(".") == -1)
          )
          classes.push(m[key].replace(/\s/g, " "));
      }
    }
  } while (m);
  return classes;
}

function getAllClasses() {
  var csses = document.querySelectorAll('link[rel="stylesheet"]'); 
   var classes = []
  for (i = 0; i < csses.length; ++i) {
    // let styledata = httpGet(csses[i].href);
    var styledata = ".hi{ display: none; }";
    var cclasses = getAllCSSClasses(styledata);
    var classes = Object.assign([], classes, cclasses);
    classes.concat(cclasses);
  }
  return classes;
}

function getHTMLUsedClasses() {
  var elements = document.getElementsByTagName('*');
  var unique = function (list, x) {
    if (x != "" && list.indexOf(x) === -1) {
        list.push(x);
    }
    return list;
  };
  var trim = function (x) { return x.trim(); };
  var htmlclasses = [].reduce.call(elements, function (acc, e) {
    return e.className.split(' ').map(trim).reduce(unique, acc);
  }, []);
  return htmlclasses;
}


function getUndefinedClasses(cssclasses, htmlclasses) {
  var undefinedclasses = [];
  for (let key in htmlclasses) {
    if(cssclasses.indexOf(htmlclasses[key])  == -1 ) {
       undefinedclasses.push(htmlclasses[key]);
    }
  }
  return undefinedclasses;
}

var cssclasses = getAllClasses();
var htmlclasses = getHTMLUsedClasses();

console.log("Undefined classes : " + getUndefinedClasses(cssclasses, htmlclasses))

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="hi there">
</head>
<body>
  <div class="hi"></div>
  <div class="there"></div>
  <div class="there_thier_333"></div>
</body>
</html>

做了什么：

我从css数据中获取所有类名，（你可以传递css 各种方式的数据）。
然后我获得HTML元素中使用的所有类，这两个类都记录在数组中。
最后，我只是推送HTML Elements使用但在cssclasses数组中找不到的类，这样就会在CSS中留下未定义的类。

（jsbin here needed）

如何查找未在任何CSS选择器中使用的类？

1 个答案: