博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
依赖浏览器实现指定元素css样式提取
阅读量:6806 次
发布时间:2019-06-26

本文共 2520 字,大约阅读时间需要 8 分钟。

  hot3.png

一直以为剪藏是保存的css链接+正文,然后控制台查看了剪藏的保存的正文发现他是提取元素的css样式加入style 理论上可以单独抽取样式不依赖大量的css文件,猜测浏览器有类似的函数可以提取 然后写了如下代码可以提取指定元素的css样式css选择器和id选择器元素样式 代码如下:

var obj={    "css":[],    "id":[],    "node":[]};(function(){    for(var j=0;j
"+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
=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

你可能感兴趣的文章
使用angularjs写指令
查看>>
Linux下高并发socket最大连接数所受的各种限制 .
查看>>
php基础教程之mysqli
查看>>
jvax.net.ssl.SSLException: 异常解决
查看>>
IPC(进程间通信)几种常用的方法
查看>>
Python 模块 & 作用域
查看>>
20145129 《Java程序设计》第5周学习总结
查看>>
Linux服务器---使用mysql
查看>>
Linux服务器---安装telnet
查看>>
UBUNTU 12.04 LTS 64 JDK 安装配置
查看>>
CIF、DCIF、D1分辨率是多少?
查看>>
js 中解决 下载路径有中文的问题
查看>>
php 面向对象基础总结
查看>>
负载均衡集群解决方案 (二)Nginx
查看>>
linux下tc控制流量控制档
查看>>
Oracle基础学习总结之数据库与实例
查看>>
sftp配置多用户权限
查看>>
我的友情链接
查看>>
Linux初认识
查看>>
netbeans build in one jar
查看>>