title: Convert document.stylesheets into array of paths in javascript
body: <p>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...</p>
  
  <p>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...</p>
  
  <pre><code>function checkStyleSheet (styleSheetPath){
      var mysheets=document.styleSheets;
      for (var i = 0, max = mysheets.length; i &lt; max; i++) {
          if (mysheets[i].href == styleSheetPath){
              return true;
          }
      }
      return false;
  }
  </code></pre>
  
  <p>Thanks</p>
  
  <p><strong>JFiddle</strong>
  <a href="https://jsfiddle.net/3jsvbwrv/" rel="nofollow">https://jsfiddle.net/3jsvbwrv/</a></p>
  
  <p><strong>Edit:</strong> 
  console.log of mysheets[i] just inside the for loop returns...</p>
  
  <pre><code>// CSSStyleSheet → http://example.com/example.css
  CSSStyleSheet { 
      ownerRule: null,
      cssRules: CSSRuleList[1],
      type: "text/css",
      href: null,
      ownerNode: &lt;style&gt;,
      parentStyleSheet: null,
      title: "",
      media: Object[0],
      disabled: false 
  }
  </code></pre>
  
  <p><strong>Edit 2:</strong> 
  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.</p>
  
  <p><strong>Edit 3:</strong>
  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)...</p>
  
  <pre><code>function addStyleSheet (styleSheetPath){
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = styleSheetPath;
      document.getElementsByTagName("head")[0].appendChild(link);
  }
  </code></pre>
  
  <p>My end goal is to make this work...</p>
  
  <pre><code>function requireStyleSheet (styleSheetPath){
      if (!checkStyleSheet(styleSheetPath)){
          addStyleSheet(styleSheetPath);
      }
  }
  </code></pre>
  
  <p><strong>Edit 4</strong>
  My test html: </p>
  
  <pre><code>&lt;button onmousedown="addStyleSheet('htt://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css')"&gt;Step1‌​&lt;/button&gt;
  &lt;button onmousedown="requireStyleSheet('http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css')"&gt;S‌​tep 2&lt;/button&gt;
  </code></pre>
  
  <p><strong>Edit 5</strong> 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.</p>