CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
Wasps
Wasps

Reputation: 35

Checking the name of a .css stylesheet with javascript/jquery

I'm trying to make a little chrome extension for a forum, but I only want it to work in a certain area of the forum.

Problem is I cant just do "matches": ["subforum"] since threads in that forum don't distinguish what subforum they are in by the URL.

The subforum has its own css stylesheet, So I'm thinking if I can do a quick check to see if the current stylesheet matches subforum.css it would work fine.

Basically I just need to check the name of the stylesheet and if that isn't possible, how I can accurately check if the current stylesheet contains a certain word or element or something.

Upvotes: 3

Views: 1120

Answers (2)

Paul S.
Paul S.

Reputation: 66324

You can loop over the stylesheets themselves, and the @import rules

function sheetExists(name){
    var s = document.styleSheets, i = s.length, j = 0;
    while(i-->0){
        if(s[i].href !== null){
            if(s[i].href.indexOf(name) !== -1) return true;
        }
        while(j < s[i].cssRules.length && s[i].cssRules[j].type === 3){
            if(s[i].cssRules[j].href !== null){
                if(s[i].cssRules[j].href.indexOf(name) !== -1) return true;
            }
            j++;
        }
        j = 0;
    }
    return false;
}
sheetExists('subforum.css');

Upvotes: 1

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70139

Using the Attribute Contains Selector:

if ($('link[href*="myStylesheet.css"]').length) {
    //stylesheet containing "myStylesheet.css" in the href attribute was found
} else {
    //not found
}

Fiddle

Of course, you can also use the Attribute Equals Selector if you give the full exact attribute value.

if ($('link[href="path/To/myStylesheet.css"]').length) {
    //stylesheet with link="myStylesheet.css" found, do stuff
}

Fiddle

Upvotes: 0

Related Questions