Javascript 获取页面中所有的CSS

来源：互联网发布：java 预测算法开源编辑：程序博客网时间：2024/05/20 10:20

最近遇到一个难题，需要用javascript把页面所有的CSS都抓到，如果是html中的style标签就很好获取，或者是html中内联的style也好获取。

但是html还可以通过link和@import的方式导入css，特别是@import，在link进来的css文件中完全可能还有@import，于是就又多了个css文件。

index.html:

<html><head><link rel="stylesheet" type="text/css" href="http://i.cdn.turner.com/cnn/.element/css/3.0/personalization.css" ></head></html>

研究了一下JS的获取方法，发现IE和Firefox都有办法获取。

在IE和Firfox中都有document.styleSheets这个对象，这个对象包含了在这个页面中的所有css，可以看作页面中的每一个link或者没一个style标签定义的css算一个sheet，只不过在取值的时候IE和Firefox稍有点不同。

//在IE中的取值方式var sheets = document.stylesheets;var cssSheets = {};for(var i=0,l=sheets.length;i<l;i++){var href = sheet.href;//如果是link或者是@import的css就会有href，值是绝对路径的url，即使原来是相对路径，但是通过这个方式到的是绝对路径；var cssText = sheet.cssText;//在IE中很直接，通过cssText就能取到这个sheet的css，在firefox中稍微麻烦一点cssSheets[herf] = cssText;}

//在firefox中的取值方式var sheets = document.stylesheets;var cssSheets = {};for(var i=0,l=sheets.length;i<l;i++){var href = sheet.href;//这个和IE是一样的//取cssText要复杂点var rules = sheet.cssRules;var cssText = "";for(var j=0,le=rules.length;j<le;j++){var rule = rules[j];var rc = rule.cssText;cssText += rc;}cssSheets[herf] = cssText;}

但是如果在这个sheet中有通过@import的方式导入其他的css，那就需要继续获取imports

IE是通过imports = sheet.imports来获取，而firefox是通过rule.styleSheet来取，加入递归

//在IE中的取值方式var sheets = document.stylesheets;var cssSheets = {};function parseSheet(sheet){var imports = sheet.imports;for(var i=0,l=imports.length;i<l;i++){parseSheet(imports[i]);}var href = sheet.href;var cssText = sheet.cssText;cssSheets[herf] = cssText;};for(var i=0,l=sheets.length;i<l;i++){parseSheet(sheets[i]);}

//在firefox中的取值方式var sheets = document.stylesheets;var cssSheets = {};function parseSheet(sheet){var href = sheet.href;var rules = sheet.cssRules;var cssText = "";for(var j=0,le=rules.length;j<le;j++){var rule = rules[j];var rc = rule.cssText;cssText += rc;var styleSheet = rule.styleSheet;//如果rule是@import的样式，那就继续获取它的styleSheetif(styleSheet && styleSheet!=null && styleSheet.href){parseSheet(styleSheet);}}cssSheets[herf] = cssText;};for(var i=0,l=sheets.length;i<l;i++){parseSheet(sheets[i]);}

通过这个方式就能把页面中定义的style标签，link标签里面的css都取到了。