通过 JavaScript 访问 CSS 文件内容答案

【问题标题】：Access CSS file contents via JavaScript通过 JavaScript 访问 CSS 文件内容
【发布时间】：2012-02-29 02:42:26
【问题描述】：

是否可以在文档中获取 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 规则），请发布！

【问题讨论】：

How to read from CSS files with jQuery的可能重复
您是否想使用 jquery 或其他一些 js 技术来编辑元素的 css 属性。 ?
你想要完整的css文件？？
@Diodeus 这不是一个重复，正如我所说我对从样式表中解析 CSS 值不感兴趣，我想提取整个文本内容。
@Thilanka 不，我想要全部内容。就像您对文本文件执行 ajax 请求一样。

标签： javascript jquery css stylesheet

【解决方案1】：

您可以使用 document.styleSheets 访问加载的 CSS。

【讨论】：

【解决方案2】：

使用该特定示例（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);
    });
});

Live example - 该示例有一个样式表和两个规则。

【讨论】：

document.styleSheet 很好，但不是我需要的。我需要确切的文本内容，而不是要循环的规则数组。也许我对此并不清楚。
@David：那么你将不得不做额外的 GET。加载和解析 CSS 文本后，据我所知，浏览器不会保留它的原始来源。（HTML 页面也是如此，这就是为什么您会看到“查看源代码”请求获取源文本的原因。）
是否可以通过ajax加载css文件的内容，然后在页面中创建一个
@David：不，当您访问innerHTML 属性时，浏览器创建一个HTML字符串，表示元素的DOM树的当前状态（在这种情况下，整个文档）您可以访问它。它与页面的源代码完全不同，它的格式可能不同，实际上可能一直不同，因为已经完成了 DOM 操作，可能省略了浏览器包含的标签，可能有有 cmets 浏览器不保留，不同的引用属性等，等等。
@SlaterVictoroff - 哪一部分？我会惊讶于 SOP（不是 CORS，这是一种放松 SOP 的方式）违反同一来源的事情。

【解决方案3】：

如果样式表包含在同一个域中，您可以使用简单的 ajax get 调用来加载内容

编辑更新后：
我尝试使用此代码（在 FX10 上）作为 概念证明，它仅使用一个对 CSS 的请求，但它似乎是对我来说有点老套，应该进行测试和验证。如果 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 代码 :)
享受吧。

【讨论】：

是的，刚刚意识到这一点并且它可以工作，但是如果有一个解决方案不需要对已加载的文件进行额外请求，我想听听。
@David：有，我已经贴出来了。
不错的方法。你真的想使用text，而不是html。使用 text 的代码的实时副本：jsbin.com/elopak
@T.J.Crowder 几秒钟前刚刚注意到并更新，谢谢。我想在块中包含一个元素，但我认为元素中的 html 不是有效的。 HTML5 会允许这样做吗？ (dev.w3.org/html5/markup/noscript.html)
@FabrizioCalderan：在head（或几乎其他任何地方）中使用noscript 很好； reference。尽管如此，如果可以等待 CSS 直到 ajax 调用完成，我会将noscript 放在文档的最底部。

【解决方案4】：

如果您使用 XMLHttpRequest 加载页面，则无需再次加载即可访问这些文件。

最好不要重复减少带宽和效率。

如果 css 是动态生成的并且根据请求的时间而有所不同怎么办？

【讨论】：

【解决方案5】：

不使用 ajax 获得样式表的最接近方法是确实迭代所有 CSS 规则并将它们连接成一个字符串。这将生成删除了所有 cmets 和多余空格的原始文件。这是有道理的，因为浏览器只需要将解析后的样式表保存在内存中，而不是原始文件。它只有 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');

【讨论】：

它还会删除浏览器不理解的样式。这正是我需要这个的原因。

【解决方案6】：

是的，您可以使用 $.get。

例子：

$.get('/path/to/css/file.css', function (resp) {
    // resp now should contain your CSS file content.

});

【讨论】：

【解决方案7】：

我认为您最好的选择是使用 ajax 加载它，例如：

$.get("/path/to/file.css", function(cssContent){
    alert("My CSS = " + cssContent);
});

【讨论】：