Convert document.stylesheets into array of paths in javascript

Question

I have a dynamic bit of code in java-script that analyzes the style-sheets on a page. I've got most parts working, but I am having one hang-up...

A portion where I'm checking for the existence of certain style-sheets. MDN has this to say about it, "[The StyleSheetList] is an array-like object but can't be iterated over using Array methods. However It can be ... converted to an Array." They include an example where they turn the object into an array of rules, but I don't see a clear way to get path. It also says "styleSheetList[index]" is a way it can be accessed. I tried creating this function, but it doesn't work, always returning false...

function checkStyleSheet (styleSheetPath){
    var mysheets=document.styleSheets;
    for (var i = 0, max = mysheets.length; i < max; i++) {
        if (mysheets[i].href == styleSheetPath){
            return true;
        }
    }
    return false;
}

Thanks

JFiddle https://jsfiddle.net/3jsvbwrv/

Edit: console.log of mysheets[i] just inside the for loop returns...

// CSSStyleSheet → http://example.com/example.css
CSSStyleSheet { 
    ownerRule: null,
    cssRules: CSSRuleList[1],
    type: "text/css",
    href: null,
    ownerNode: <style>,
    parentStyleSheet: null,
    title: "",
    media: Object[0],
    disabled: false 
}

Edit 2: Note: Changing mysheets[i].href to just mysheets[i] in the if statement does not resolve the issues. example.css would still be found as false.

Edit 3: I don't feel it should have any impact, but just in case it might be useful, or give a broader overview, or help with context... the CSS scripts that are there are included via this function which is called first (which is verified to work)...

function addStyleSheet (styleSheetPath){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = styleSheetPath;
    document.getElementsByTagName("head")[0].appendChild(link);
}

My end goal is to make this work...

function requireStyleSheet (styleSheetPath){
    if (!checkStyleSheet(styleSheetPath)){
        addStyleSheet(styleSheetPath);
    }
}

Edit 4 My test html:

<button onmousedown="addStyleSheet('htt://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css')">Step1‌​</button>
<button onmousedown="requireStyleSheet('http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css')">S‌​tep 2</button>

Edit 5 As some testers noted, the code works as-is. It turns out that my problem is that the called file hadn't finished loading before my second function tried to check for its presence.

Answer 1

I know this is an old question but it was also the first search result when I came looking for the same thing. Javascript has a few new tricks I guess, since this is what I have working now:

[].slice.call(document.styleSheets).map(e => e.href)

Answer 2

I ran the code in my page with a valid CSS file as an argument, it returned true . In your example it does appear as though you are trying to load a JS file instead of a CSS file:

<button onmousedown="addStyleSheet('http://momentjs.com/downloads/moment.min.js')">Step1‌​</button>
<button onmousedown="requireStyleSheet('http://momentjs.com/downloads/moment.min.js')">S‌​tep 2</button>

Perhaps you might consider having checkStyleSheet check a hash instead of looping through each style sheet each time as well.