依赖浏览器实现指定元素css样式提取-优快云博客

本文介绍了一种通过JavaScript从网页中提取CSS样式的实用方法。该方法可以分别获取ID选择器、类选择器及标签选择器对应的样式，并展示了如何在实际项目中应用这些样式，有助于减少对大量CSS文件的依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://my.oschina.net/KFS/blog/1828077