Question

如果我使用不带关键帧的CSS，则insertRule可以正常运行，并且一切都非常完美。但是，如果我使用包含关键帧的CSS，则会收到错误消息：

无法在'CSSStyleSheet'上执行'insertRule'：无法解析规则...

这有效：

const css = window.document.styleSheets[0];
css.insertRule(`
div {
  width: 100%;  
  animation: move 2s;
  position: absolute;
  transition: 0.65s;
}
`, css.cssRules.length);

这不起作用：

const css = window.document.styleSheets[0];
css.insertRule(`
div {
  width: 100%;  
  animation: move 2s;
  position: absolute;
  transition: 0.65s;
}
@keyframes move {
  0% {
    left: 0;
  }
  20% {
    left: 100px;
  }
  100% {
    left: -100%;
  }
}
`, css.cssRules.length);

我如何使其工作？

Answer 1

发布的代码尝试通过一次调用insertRule插入两个规则。

使用两次调用分别插入一条规则

const css = window.document.styleSheets[0];
css.insertRule(`
div {
  width: 100%;  
  animation: move 2s;
  position: absolute;
  transition: 0.65s;
}
`, css.cssRules.length);
css.insertRule(`
@keyframes move {
  0% {
    left: 0;
  }
  20% {
    left: 100px;
  }
  100% {
    left: -100%;
  }
}
`, css.cssRules.length);

div { height: 3em;}

<div> DIV element</div>

正常运行而不会引发错误。如果insertRule的规则参数包含多个规则，则在列出的Restrictions的MDN中记录语法错误。

insertRule不适用于关键帧

1 个答案: