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

发布时间：2020-12-14 18:39:53 所属栏目：资源来源：网络整理

导读：考虑页面中的以下 HTML摘录： style type="text/css".existing-class { background-color: #000;}/stylediv class="existing-class non-existing-class"/div 它有2个类.事情就是这样：非现有类没有在页面中可用的CSS中定义,但是div正在使用它. 我的问题是：

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

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

它有2个类.事情就是这样：非现有类没有在页面中可用的CSS中定义,但是div正在使用它.

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

解决方法

好的,你去;)
看一下我创建的脚本,特别是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)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!