使用 JavaScript 从外部文件读取 CSS？答案

【问题标题】：Read CSS from external file using JavaScript?使用 JavaScript 从外部文件读取 CSS？
【发布时间】：2019-12-29 06:05:07
【问题描述】：

我希望能够对加载到页面上的所有 CSS 文件运行一个正则表达式，以用于内部工具。这允许我对 CSS 文件进行 lint 并检查是否有任何冲突的声明。

通过迭代 document.stylesheets 并获取 cssRules 的值，这对本地文件非常有效。

但是，对于从外部网站（例如 Typekit、Google 字体等）加载的 CSS，对于 cssRules 会返回 null（见图）。

我尝试使用 JSONP 来获取文件，但它返回了一个无效的令牌，因为它可能需要 JSON 并且正在获取 CSS 作为响应。有没有我还没有考虑过的解决方法？

为了完整起见，这是我尝试过的 JSONP 测试：

$.ajax({
    type: 'GET',
    url: "path/to/file.css",
    jsonp: "callback",
    dataType: "jsonp",
    success: function(response) {
        var test = JSON.stringify(response);
        console.log(test);
    }
});

是否有可能从这些样式表中获取 CSS 作为我可以通过我的正则表达式传递的字符串？

【问题讨论】：

没有办法解决这个问题，css 不是 JSON，也不是 JSONP，除非您从中获取文件的主机启用了跨源共享，否则您无法使用客户端javascript。
您可以创建一个 PHP 脚本，该脚本使用（例如 curl）获取样式表，然后将其返回到您的页面（通过 AJAX）供您处理。

标签： javascript css regex jsonp

【解决方案1】：

尝试使用完整的 css 链接，只使用 ajax 的 url 属性。

演示：jsFiddle

$.ajax({
    url:"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap-theme.min.css"
})
.done(function(result){
    $('.style').html(result);
});

.style {
  max-width: 300px;
  max-height: 300px;
  overflow:auto;

<div class="style"></div>

【讨论】：