tags:

views:

65

answers:

2

I'd like to use jQuery to grab all of the css file references from my page. Any suggestions how i could construct a query to grab them all?

As an example, stackoverflow has a head section that looks like this:

<head>

    <title>Ask a Question - Stack Overflow</title>        
    <link rel="stylesheet" href="/content/all.css?v=3647">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-itouch-icon" href="/apple-touch-icon.png">
    <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
    <script type="text/javascript" src="/content/js/master.js?v=3567"></script>
    <script type="text/javascript">var imagePath = '/content/img/so/';</script>

</head>

and from there, i'd like to use jquery to pull out just the single css class (or multiples if they existed) to work with.

+1  A: 

To select link element and pick the link you can use:

$("link[rel=stylesheet]").attr("href")

But I'm not sure you can lookup into and pull out css class from there.

Artem Barger
+4  A: 
$.each($("link[rel='stylesheet']").attr("href"), function() {
    var href = this;
    $.get(href, function(css_data) {
        // do something with css_data
    });
});

You might need to worry about capitalization on 'stylesheet', though. Also, it may be nontrivial to extract class information from css_data -- it would come down to text processing (unless there's a plugin to deal with this kind of thing that I'm not aware of).

Johnny G
Thanks - exactly what I needed. It didn't like my caps on the 'stylesheet' attrib.
Scott Ivey