在样式表中插入多个 CSS 规则

Question

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 1

You can insert a new stylesheet link with a data URI. Assuming your CSS rules are in a variable css , then:

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

This works at least in the latest Chrome, Firefox and IE.

Alternatively, you could add your rules one by one using insertRule and simply wrap each addition in a try block, so that the errors thrown by prefixed rules are ignored.

Answer 2

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

Answer 3

Issue occurred due to space in the style element

@keyframes userScore

Try like below @keyframes_userScore

Answer 4

The parsing is failing because you have '@' character in the style name. Try removing the '@' from or replae it with '_' and it will work.