依赖浏览器实现指定元素css样式提取

原创
2018/06/11 13:38
阅读数 777

一直以为剪藏是保存的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);```


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部