Question

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

简而言之，我想将任意CSS（即.foo {} .bar {}）转换为CSSStyleSheet对象。

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

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

Answer 1

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

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

Answer 2

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

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

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

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

从CSS字符串创建CSSStyleSheet对象？

2 个答案: