考虑页面中的以下
HTML摘录：
<style type="text/css">
.existing-class {
background-color: #000;
}
</style>
<div class="existing-class non-existing-class"></div>
它有2个类.事情就是这样：非现有类没有在页面中可用的CSS中定义,但是div正在使用它.
我的问题是：开发人员如何以编程方式检测页面中正在使用未在加载的CSS中实际定义的类的元素？
解决方法
好的,你去;)
看一下我创建的脚本,特别是getUndefinedClasses函数.
看一下我创建的脚本,特别是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中留下未定义的类.
