Question

我有一个带有xhr加载的css内容，如下面的代码，

try{
    Process pr =new ProcessBuilder("gnome-terminal", "-e", "pathToScript/script.sh").start();
    }catch(Exception e){
        e.printStackTrace();
    }

到目前为止，我只知道如何通过var xhr = new XMLHttpRequest(); xhr.open('GET', 'my.css'); xhr.onreadystatechange = function () { if (this.readyState == this.DONE) { xhr.onreadystatechange = null; var style = $('<style/>').html(this.responseText); // it will print a dom string in dev console. console.log(style[0]); } }; xhr.send();加载css内容，但我想让css内容成为ajax对象，就像访问StyleSheet一样，我找不到任何方法来做到这一点，有没有办法做到这一点？

我的问题不适用或将css规则插入到文档中，我的问题是如何让css内容字符串成为StyleSheet对象，https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet

Answer 1

我认为你可以这样做：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'my.css');
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) { //4=this.DONE

    xhr.onreadystatechange = null;

    //var style = $('<style/>').html(this.responseText);
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = this.responseText;
    document.getElementsByTagName('head')[0].appendChild(style);

    var cssSheet = style.sheet; //this is the StyleSheet object you need
    var rule = cssSheet.cssRules[0]; //first rule defined in my.css
    alert("first css rule: "+ rule.selectorText + " => " + rule.style.cssText); 
  }
};
xhr.send();

主要提示是使用HTMLStyleElement的sheet属性。只有在将其附加到文档后才能访问它。

如何将css内容加载为StyleSheet对象？

1 个答案: