从CSS字符串创建CSSStyleSheet对象?

时间:2019-05-06 15:59:22

标签: javascript css

是否存在将CSS字符串转换为其各自的CSSStyleSheet对象的嵌入式解决方案?

简而言之,我想将任意CSS(即.foo {} .bar {})转换为CSSStyleSheet对象。

我看到CSSStyleSheet对象具有一个insertRule方法,但这对我没有多大帮助,因为我没有将CSS分成单独的规则,也许对某些正则表达式魔术是可行的,但是我会我猜必须写一个正确的解析器才能正确地做到这一点。

是否有一种优雅的方法可以实现,而无需编写解析器?

2 个答案:

答案 0 :(得分:0)

以下是执行此操作的函数:

function CSSString2CSSStyleSheet ( css ) {
  const style = document.createElement ( 'style' );
  style.innerText = css;
  document.head.appendChild ( style );
  const {sheet} = style;
  document.head.removeChild ( style );
  return sheet;
}

答案 1 :(得分:0)

这在Chromium中有效,但在Firefox中提供了error

const css = `
    .someClass
    {
        background-color : black;
        color: white;
    }
`;

const myStyleSheet = new CSSStyleSheet();
myStyleSheet.replace(css);

您可以帮助说服Firefox修复此错误here