Question

好的，所以我需要在样式表中添加规则，但它也需要跨浏览器，所以我需要多个规则。

现在我可以使用奇异的线条来完成一个工作（Chrome）。

但是，我找不到任何与多行相关的文档或任何内容。

我们的想法是使用浏览器前缀添加多个css动画，只是为了增加乐趣。

这就是我要做的事情（我在Chrome中进行调试）：

styleSheet.insertRule("@-webkit-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);
styleSheet.insertRule("@-moz-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);
styleSheet.insertRule("@-ms-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);
styleSheet.insertRule("@keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);

然后在此之后我需要为每个动画添加浏览器前缀：

document.getElementById('starsColoured').style.webkitAnimationName = "userScore";
document.getElementById('starsColoured').style.mozanimationName = "userScore";
document.getElementById('starsColoured').style.MSAnimationName = "userScore";
document.getElementById('starsColoured').style.animationName = "userScore";

它不起作用，我并不感到惊讶，我只是不知道添加多个的实际方法。特别是当我尝试将前缀的animationname添加到元素时。

我试图将所有规则放在一行中，如下所示：

styleSheet.insertRule("@-webkit-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} } @-moz-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} } @-ms-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} } @keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);

再次没有运气，这给了我错误：

Uncaught SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '@-webkit-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} } @-moz-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} } @-ms-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} } @keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} }'.

如果我将它们作为单独的规则尝试，我会收到以下错误：未捕获的SyntaxError：无法执行＆＃39; insertRule＆＃39; on＆＃39; CSSStyleSheet＆＃39;：无法解析规则＆＃39; @ - moz-keyframes userScore {0％{width：0px; } 100％{width：380px;}}＆＃39;。

我在FireFox中尝试它，我得到以下错误，与第一个insertRule行（Chromes）有关：

SyntaxError: An invalid or illegal string was specified

所以关于它。

非常感谢任何帮助！

如果我可以帮助它，我试图避免使用jQuery。

我确定多行文档也可以帮助我和其他人。

提前致谢

Answer 1

您可以插入带有数据URI的新样式表链接。假设您的CSS规则位于变量css中，那么：

head = document.getElementsByTagName('head')[0];
stylesheet = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'data:text/css,' + escape(css);  // IE needs this escaped
head.appendChild(link);

这至少适用于最新的Chrome，Firefox和IE。

或者，您可以使用insertRule逐个添加规则，并将每个添加内容包装在try块中，以便忽略前缀规则引发的错误。

Answer 2

如何修改<style>代码？

<style id="custom-styles"></style>

<script>
  var red = '#f00';
  document.getElementById('custom-styles').innerHTML = 'body { color: ' + red + '; }';
</script>

这是一个小型演示：http://jsbin.com/mamekame/2/edit?html,js,output

Answer 3

解析失败，因为你有＆＃39; @＆＃39;样式名称中的字符。尝试删除＆＃39; @＆＃39;来自或替换为＆＃39; _＆＃39;它会起作用。

将多个CSS规则插入样式表

3 个答案: