是否可以在文档中获取 CSS 文件的全部文本内容？例子：
<link rel="stylesheet" id="css" href="/path/to/file.css">
<script>
var cssFile = document.getElementById('css');
// get text contents of cssFile
</script>
我并不是真的想通过 document.styleSheets 获取所有 CSS 规则，还有其他方法吗？
更新：当然有 ajax 选项，我很欣赏给出的答案。但是似乎没有必要使用浏览器中已经加载的 ajax 重新加载文件。因此，如果有人知道提取当前 CSS 文件的文本内容的另一种方法（不是 CSS 规则），请发布！
使用该特定示例（其中 CSS 与页面位于同一来源），您可以通过ajax以下方式将文件读取为文本：
$.ajax({
url: "/path/to/file.css",
dataType: "text",
success: function(cssText) {
// cssText will be a string containing the text of the file
}
});
如果要以更结构化的方式访问信息，document.styleSheets则是与文档关联的样式表数组。每个样式表都有一个称为cssRules（或仅rules在某些浏览器上）的属性，它是样式表中每个规则的文本数组。每个规则都有一个cssText属性。所以你可以遍历那些，例如：
$.each(document.styleSheets, function(sheetIndex, sheet) {
console.log("Looking at styleSheet[" + sheetIndex + "]:");
$.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
console.log("rule[" + ruleIndex + "]: " + rule.cssText);
});
});
现场示例- 该示例有一个带有两个规则的样式表。
get如果样式表包含在同一域中，您可以使用简单的 ajax调用加载内容
更新后编辑：
我尝试了此代码（在 FX10 上）作为仅使用一个 CSS 请求的概念证明，但对我来说似乎有点hacky，应该进行测试和验证。如果 javascript 不可用，它也应该通过一些后备来改进。
CSS（外部文件test.css）
div { border: 3px solid red;}
HTML/jQuery
<!doctype html >
<html>
<head>
<!-- provide a fallback if js not available -->
<noscript>
<link rel="stylesheet" href="test.css" />
</noscript>
</head>
<body>
<div></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script>
$(document).ready(function() {
$.when($.get("test.css"))
.done(function(response) {
$('<style />').text(response).appendTo($('head'));
$('div').html(response);
});
})
</script>
</body>
</html>
您应该会看到 div 内的 CSS 代码，四周带有红色边框:)
尽情享受吧。
在不使用 ajax 的情况下获得样式表的最接近方法是确实迭代所有 CSS 规则并将它们连接成一个字符串。这将生成删除所有注释和多余空格的原始文件。这是有道理的，因为浏览器只需要将解析后的样式表保存在内存中，而不是原始文件。它只有3行代码：
function css_text(x) { return x.cssText; }
var file = document.getElementById('css');
var content = Array.prototype.map.call(file.sheet.cssRules, css_text).join('\n');
我认为你最好的选择是用 ajax 加载它，例如：
$.get("/path/to/file.css", function(cssContent){
alert("My CSS = " + cssContent);
});
是的，你可以使用 $.get。
例子：
$.get('/path/to/css/file.css', function (resp) {
// resp now should contain your CSS file content.
});