1

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

现在我可以用一条单行线得到一个工作（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";

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

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

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;} }'.

如果我将它们作为单独的规则尝试，我会收到以下错误： Uncaught SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '@-moz-keyframes userScore { 0% { width: 0px; } 100% {宽度：380px;} }'。

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

SyntaxError: An invalid or illegal string was specified

就是这样。

任何帮助将非常感激！

如果我能提供帮助，我会尽量避免使用 jQuery。

而且我确信多行的任何文档也会对我和其他人有所帮助。

提前致谢

4

3 回答 3

3

您可以插入带有数据 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块中，以便忽略前缀规则引发的错误。

于 2015-03-27T14:16:19.320 回答
1

只是修改一个<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

于 2014-04-14T00:13:30.593 回答
-1

解析失败，因为样式名称中有“@”字符。尝试从'@'中删除'@'或用'_'替换它，它会起作用。

于 2015-04-03T08:58:56.700 回答