Insert Multiple CSS rules into a stylesheet

Okay, So I need to add rules to a style sheet, but it also needs to be cross browser, so I need multiple rules.

Now I can get one working (Chrome) with a singular line.

However, I can’t find any documentation or anything related to multiple lines.

The idea is to add multiple css animations using browser prefixes as well, just to add to the fun.

This is what I am trying to do (I’m debugging in 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);

And then after this I need to add the browser prefix to each animation:

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

And it doesn’t work, I’m not that surprised, I just don’t know the actual way to add more than one. Especially when I then try and add the prefixed animationname to the element.

I’ve tried to put all the rules into one line, like so:

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);

Again with no luck, this gives me the error of:

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

If I try them as a separate rule, I get the error of: Uncaught SyntaxError: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’: Failed to parse the rule ‘@-moz-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} }’.

I try it in FireFox, and I get the following error, relating to the first insertRule line (Chromes):

SyntaxError: An invalid or illegal string was specified

So that’s about it.

Any help would be much appreciated!

I am trying to avoid jQuery if I can help it.

And I’m sure any documentation on multiple lines would also help me and others.

Thanks in advance

Answer

How about just modifying a <style> tag?

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

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

Here’s a small demo: http://jsbin.com/mamekame/2/edit?html,js,output

Advertisement

Answer