通过JavaScript访问CSS文件内容

小编典典

通过JavaScript访问CSS文件内容

css

是否可以获取文档中CSS文件的全部文本内容？F.ex：

<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规则），请发表！

阅读 583

2020-05-16

共1个答案

小编典典

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

*更新后进行 *编辑：
我尝试使用此代码（在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代码：)
享受。

2020-05-16