我必须使用 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
对于外部的linked 样式表，问题更大。在现代浏览器中，您可以从 document.styleSheets[].cssRules[].cssText 属性中获取每个规则的文本(包括内联、链接和@imported 样式表)。
不幸的是 IE 没有实现这个 DOM Level 2 Style/CSS标准，而不是使用 its own subtly different StyleSheet 和 CSSRule 接口(interface)的版本。因此，您需要一些嗅探和分支代码来在 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');
关于javascript - 获取html文件中使用的所有css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1679507/