Question

如何从＆lt; style id =“myId”type =“text / css”＆gt; 中获取整个 css ，将其推送到 JSON 文件？

＆＃xA;＆＃xA;

我动态 css 添加到＆lt; style＆gt; ，所以在我的 html 中，样式为空。

＆＃xA;＆＃xA;

尝试使用 $（'＃myId'）。text（） ， $（'＃myId'）。html（）没有运气。

＆＃xA;＆＃xA;

我需要这种类型的输出：

＆＃xA;＆＃xA;

  function addRule（selector，rules）{＆＃xA; var stylesheet = document.getElementById（'myId'）;＆＃xA; if（stylesheet）{＆＃xA; stylesheet = stylesheet.sheet;＆＃xA; if（stylesheet.addRule）{＆＃xA; for（var i = 0; i＆lt; selector.length; ++ i）{＆＃xA; stylesheet.addRule（selector [i]，rules）;＆＃xA; }＆＃XA;如果（stylesheet.insertRule）{＆＃xA; stylesheet.insertRule（selector.join（'，'）+'{'+ rules +'}'，stylesheet.cssRules.length）;＆＃xA; }＆＃XA; }＆＃xA;}＆＃xA; function pushToJson（）{＆＃xA; item {}＆＃xA; dataCSS = []＆＃xA; item [“myCSS”] ='?????'; ＆＃XA; //这里我需要css＆＃xA; //例如：“h1 {margin：0;} .title {padding：10px 0;}”＆＃xA; dataCSS.push（item）;＆＃xA;}＆＃xA; addRule（['。title，h2']，'color：red;'）;＆＃xA;

＆＃xA ;＆＃xA;

任何帮助？

＆＃xA;

Answer 1

以下代码从指定的var newJSON = {}; 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); } } pushToJson(); } function pushToJson() { newJSON = $('#myId').html(); console.log(newJSON); }标记中获取整个代码。然后，您可以将其存储在新变量中，或者随意使用它。

<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>

grunt --verbose

Answer 2

相当于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>

Answer 3

你应该试试这个：

$('#myId').css()

Answer 4

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>

  </title>
  <link rel="stylesheet" href="">
  <style>
    #myname{
      color: red;
    }
  </style>
</head>    


//This Line will yield you the style innerHTML

console.log(document.head.innerHTML);

Answer 5

使用这样的代码：

var element = document.getElementById('myId'),
    style = window.getComputedStyle(element);
jsonStyle = JSON.stringify(style);

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

5 个答案: