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

Question

I'd like to be able to run a regex over all the CSS files that are loaded on a page for an internal tool. This allows me to lint the CSS files and check for any conflicting declarations.

This works fine for local files by iterating over document.stylesheets and getting the values of cssRules .

However, for CSS that is loaded from external sites such as Typekit, Google Fonts etc returns null for cssRules (see image).

I tried using JSONP to get the file, but it returns an invalid token as it is presumably expecting JSON and is getting CSS in response. Is there a way around this that I have not considered yet?

For completeness, here is the JSONP test I tried:

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

Is it possible to get the CSS from these stylesheets as a string which I can pass through my regex?

Answer 1

try to use complete css link and just use url attribute for ajax.

Demo : 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>