Question

我正在用JavaScript创建一个CSSStyleSheet。然后，我想将样式表css导出为文本。

是否有从CSSStyleSheet获取CSS文本的函数/方式？以下返回一个空字符串：

$('<style id="mystyle"></style>')
  .attr('type', 'text/css')
  .insertBefore(this.element);

$('#mystyle')[0].sheet.insertRule('#mydiv {color: red;}', 1);

console.log($('#mystyle').html()); // should show '#mydiv {color: red;}'
console.log($('#mystyle').text());
console.log($('#mystyle')[0].innerHTML);

Answer 1

您正在使用的CSSStyleSheet对象为您提供cssRules（CSSRuleList的实例）属性，该属性是一个类似于对象的数组，您可以对其进行迭代以提取所有必要的{{1} }字符串。

例如，使用Array.prototype.reduce将所有cssTexts聚合为一个字符串：

cssText

$('<style id="mystyle"></style>')
  .attr('type', 'text/css')
  .appendTo(document.body);

const styleSheet = $('#mystyle')[0].sheet

styleSheet.insertRule('#mydiv {color: red;}');
styleSheet.insertRule('p {color: green;}');

// second argument to insertRule is not needed in our case, but your could do
// styleSheet.insertRule('#mydiv {color: red;}', styleSheet.cssRules.length);

const cssText = Array.from(styleSheet.cssRules).reduce((prev, cssRule) => {
  return prev + '\n' + cssRule.cssText
}, '')

console.log(cssText)

将动态CSS导出为文本

1 个答案: