通过JavaScript访问CSS文件内容
可以在文档中获取CSS文件的全部文本内容吗？F.ex：
var cssFile = document.getElementById('css');
// get text contents of cssFile我不是很喜欢通过document.styleSheets获取所有的CSS规则，还有其他方法吗？
更新：
当然还有ajax选项，我很欣赏你给出的答案。但是，使用已经加载到浏览器中的ajax重新加载文件似乎没有必要。因此，如果任何人知道另一种方法来提取当前CSS文件的文本内容(不是CSS规则)，请张贴！
回答 7
Stack Overflow用户
发布于 2012-02-08 00:46:08
您可以使用简单的ajax加载内容get如果包含来自同一域的样式表，则调用
编辑
更新后：
我尝试了这段代码(在FX10上)作为概念证明 这只使用了一次对CSS的请求，但在我看来有点老生常谈，应该进行测试和验证。如果javascript不可用，也应该通过一些回退来改进它。CSS (外部文件test.css)
div { border: 3px solid red;}HTML/jQuery
$(document).ready(function() {
$.when($.get("test.css"))
.done(function(response) {
$('').text(response).appendTo($('head'));
$('div').html(response);
});
})
</code></pre>
<div>您应该会在div中看到带有红色边框的CSS代码:)</div>
<div>尽情享受吧。</div>Stack Overflow用户
发布于 2012-02-08 00:48:07
这样就可以了特定示例(其中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);
});
});活生生的例子-这个例子有一个样式表和两个规则。
Stack Overflow用户
发布于 2015-09-30 03:28:26
最接近获得样式表的地方不使用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');https://stackoverflow.com/questions/9180184
复制相似问题