一直以为剪藏是保存的css链接+正文,然后控制台查看了剪藏的保存的正文发现他是提取元素的css样式加入style 理论上可以单独抽取样式不依赖大量的css文件,猜测浏览器有类似的函数可以提取 然后写了如下代码可以提取指定元素的css样式css选择器和id选择器元素样式 代码如下:
var obj={
"css":[],
"id":[],
"node":[]
};
(function(){
for(var j=0;j<document.styleSheets.length;j++)
{
var a=document.styleSheets[j].cssRules;
if(a!=null)
{
for(var i= 0;i<a.length;i++){
//console.log(a[i].selectorText+".->"+a[i].selectorText.indexOf("."));
//console.log(a[i].selectorText+"#->"+a[i].selectorText.indexOf("#"));
if(typeof(a[i].selectorText)!="undefined")
{
try{
if(a[i].selectorText.indexOf("#")!=-1){
var selectorText = a[i].selectorText.replace("#","");
var cssText = a[i].style.cssText;
obj.id.push([selectorText,cssText]);
//console.log(selectorText+"->"+cssText);
continue;
}
if(a[i].selectorText.indexOf(".")!=-1){
var selectorText = a[i].selectorText.replace(".","");
var cssText = a[i].style.cssText;
obj.css.push([selectorText,cssText]);
//console.log(selectorText+"->"+cssText);
continue;
}
var selectorText = a[i].selectorText;
var cssText = a[i].style.cssText;
obj.node.push([selectorText,cssText]);
//console.log(selectorText+"->"+cssText);
//console.log(a[i].selectorText+"->"+a[i].style.cssText);
}catch(err){
//console.log(err);
}
}
}
}
}
})()
function GetIs(name,type)
{
//字符串方法indexOf
var len = obj[type].length;
for(var i=0;i<len;i++){
//如果字符串中不包含目标字符会返回-1
if(obj[type][i][0].indexOf(name)>=0){
return obj[type][i][1];
}
}
}
function GetAttr(name,type)
{
switch(type){
case "css":
return GetIs(name,"css");
break;
case "id":
return GetIs(name,"id");
break;
case "node":
return GetIs(name,"node");
break;
}
}
function GetStyle(doc)
{
if(doc.id!=""){
console.log("id选择器样式->"+GetAttr(doc.id,"id"));
}
if(doc.css!=""){
console.log("css选择器样式->"+GetAttr(doc.css,"css"));
}
console.log("节点选择器样式->"+GetAttr(doc.nodeName.toLowerCase(),"node"));
}
console.log("css样式抽取");
var a=document.getElementById("_main_body");
GetStyle(a);```