我必须得到使用
JavaScript的HTML文件中使用的所有CSS样式.
<html>
<head>
<style type="text/css">
body {
border: 1px solid silver;
}
.mydiv{
color: blue;
}
</style>
</head>
<body>
</body>
</html>
如果上面的代码是我的HTML,我必须在head中编写一个JavaScript函数,它返回一个这样的字符串.
body {
border: 1px solid silver;
}
.mydiv {
color: blue;
}
有可能吗？
解决方法
对于内联样式表,您可以像使用任何其他元素一样从普通DOM中获取内容：
document.getElementsByTagName('style')[0].firstChild.data
对于外部链接样式表,它更成问题.在现代浏览器中,您可以从document.styleSheets [].cssRules [].cssText属性中获取每个规则的文本(包括内联,链接和@imported样式表).
不幸的是,IE没有实现这个DOM Level 2 Style/CSS标准,而是使用了its own subtly different版本的StyleSheet和CSSRule接口.因此,您需要一些嗅探和分支代码来重新创建IE中的规则,并且文本可能与原始文本不完全相同. (特别是,IE将全部删除您的属性名称并丢失空格.)
var css= [];
for (var sheeti= 0; sheeti<document.styleSheets.length; sheeti++) {
var sheet= document.styleSheets[sheeti];
var rules= ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
for (var rulei= 0; rulei<rules.length; rulei++) {
var rule= rules[rulei];
if ('cssText' in rule)
css.push(rule.cssText);
else
css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
}
}
return css.join('\n');
