javascript - 从 <style> 获取 css 作为输出文本

Question

如何获取整个 css来自 <style id="myId" type="text/css">将其插入 JSON文件？

我正在动态添加 css至 <style> ，所以在我的 html样式为空。

尝试使用 $('#myId').text() , $('#myId').html()没有运气。

我需要这种类型的输出:

function addRule(selector, rules) {
      var stylesheet = document.getElementById('myId');
      if (stylesheet) {
        stylesheet = stylesheet.sheet;
        if (stylesheet.addRule) {
          for (var i = 0; i < selector.length; ++i) {
            stylesheet.addRule(selector[i], rules);
          }
        } else if (stylesheet.insertRule) {
          stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
        }
      }
}
function pushToJson(){
  item {}
  dataCSS = []
  item ["myCSS"] = '?????'; 
  // here I need the css 
  // eg: "h1 {margin:0;} .title {padding:10px 0;}"
  dataCSS.push(item);
}
addRule(['.title, h2'], 'color:red;');

有什么帮助吗？

Answer 1

stylesheet.addRule 和stylesheet.insertRule 的等价物是

stylesheet.cssRules

这是一个使用 .cssRules 的例子，它忽略了所有继承的和应用的“实际”css，只读取你的 style 标签中的规则

参见 https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet了解更多信息。

function addRule(selector, rules) {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    if (stylesheet.addRule) {
      for (var i = 0; i < selector.length; ++i) {
        stylesheet.addRule(selector[i], rules);
      }
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
    }
  }
}

addRule(['.title, h2'], 'color:red;');
addRule(['body h2'], 'font-weight:normal;');

function pushToJson() {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    for(var i = 0; i<stylesheet.cssRules.length;++i) {
        // Do the JSON magic here
        console.dir(
            stylesheet.cssRules[i].selectorText 
            + " : " 
            + stylesheet.cssRules[i].style.cssText)
    }
  }
}

pushToJson();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="myId" type="text/css">
  body {
    background-color: lightblue;
  }
</style>
<h2>Title</h2>