title: How to load css content as a StyleSheet object?
body: <p>I have a css content with xhr load as the following code, </p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  xhr.open('GET', 'my.css');
  xhr.onreadystatechange = function () {
      if (this.readyState == this.DONE) {
          xhr.onreadystatechange = null;
          var style = $('&lt;style/&gt;').html(this.responseText);
  
          // it will print a dom string in dev console.
          console.log(style[0]);
      }
  };
  xhr.send();
  </code></pre>
  
  <p>So far I only know how to load the <code>css</code> content via <code>ajax</code>, 
  but I want to let the css content become a <code>StyleSheet</code> object, just like to access the <code>document.styleSheets[n]</code>,
  I can't find any methods to do this, is there a way to do this?</p>
  
  <p>my question is not apply or insert the css rules to the document, my question is how to let the css content string become a StyleSheet object,  <a href="https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet</a></p>