Integrate style tag using css

Question

I try to add the <style type="text/css"></style> to head using jquery. I tried like this

 $("<style type='text/css'></style>").appendTo("head");

Previously, i have this type of

<style type="text/css">
img{ 
    -moz-animation:.6s rotateRight infinite linear; 
    -webkit-animation:.6s rotateRight infinite linear; 
}

@-moz-keyframes rotateRight{
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
    100%{ -moz-transform:rotate(360deg); }
}

@-webkit-keyframes rotateRight{
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
    100%{ -webkit-transform:rotate(360deg); }
}
</style>

That above style worked when I tried this with jquery like this:

$("<style type='text/css'>img{ 
    -moz-animation:.6s rotateRight infinite linear; 
    -webkit-animation:.6s rotateRight infinite linear; 
}

@-moz-keyframes rotateRight{
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }
    100%{ -moz-transform:rotate(360deg); }
}

@-webkit-keyframes rotateRight{
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }
    100%{ -webkit-transform:rotate(360deg); }
}</style>").appendTo("head");

but i get error in editor itself. Here is the pic enter image description here I think i messup something :( http://jsfiddle.net/jSvUE/

Any suggestion would be great Thanks, vicky

AFAIK you can't have actual new lines (enter-key-presses) in a Javascript string. Either make it one line or dynamically load/enable a stylesheet using Javascript. Take a look at this: http://stackoverflow.com/a/10154554/382456 — Scott, Oct 18 '13 at 13:51
You can just add a `\\` (forward slash?) to the end of each line and try again? — putvande, Oct 18 '13 at 13:55

Scott · Accepted Answer · 2015-12-03T21:04:01.690

Try

$("<style type='text/css'>img{ \
    -moz-animation:.6s rotateRight infinite linear; \
    -webkit-animation:.6s rotateRight infinite linear; \
} \
@-moz-keyframes rotateRight{ \
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; } \
    100%{ -moz-transform:rotate(360deg); } \
} \
@-webkit-keyframes rotateRight{ \
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; } \
    100%{ -webkit-transform:rotate(360deg); } \
}</style>").appendTo("head");

Working example: http://jsfiddle.net/jSvUE/2/

Really hackish, but for a quick-n-dirty solution, that'll work. The idea here is that you are escaping the new line. A more elegant way to accomplish this, though, is to put that img as a class, and use http://api.jquery.com/toggleClass/ to toggle the animation.

Update 2016

Here in 2016, ES6 is widely supported, and the above hack can be replaced with this still-horrendous blob:

$(`<style type="text/css">
img {
    animation: 600ms rotateRight infinite linear;
}
@keyframes rotateRight {
    0% { transform: rotate(0deg); transform-origin: 50% 50% }
    100% { transform: rotate(360deg) }
}
</style>`).appendTo("head");

Hah, yeah, I had already started writing the post before I saw your comment. — Scott, Oct 18 '13 at 14:05
+1 Thanks I'm wondering why this should happen ;-) Any way i get a quick and working solution — Vignesh Pichamani, Oct 18 '13 at 14:09

score 1 · Answer 2 · answered Oct 18 '13 at 13:56

Im not sure why your doing this but your problem is you cant break lines in javascript try this

$("<style type='text/css'>img{-moz-animation:.6s rotateRight infinite linear;-webkit-animation:.6s rotateRight infinite linear; }"+

"@-moz-keyframes rotateRight{0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }100%{ -moz-transform:rotate(360deg); }}"+

"@-webkit-keyframes rotateRight{ 0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; } 100%{ -webkit-transform:rotate(360deg); }}</style>").appendTo("head");

An example is here either stick everything on one line if it is a string. Or if you want to keep nice formatting break the line with +

score 1 · Answer 3 · answered Oct 18 '13 at 14:01

The issue is with the line breaks in the JS. You can store the styles in a variable and then append that to the head so that the styles are re-usable:

var $styles = '<style type="text/css">img{-moz-animation:.6s rotateRight infinite linear;-webkit-animation:.6s rotateRight infinite linear;}@-moz-keyframes rotateRight{0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; }100%{ -moz-transform:rotate(360deg); }}@-webkit-keyframes rotateRight{0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; }100%{ -webkit-transform:rotate(360deg); }}</style>';

$("head").append($styles);

Warlock · Answer 4 · 2013-10-18T14:17:53.513

The only valid way is string concatenation:

$("<style type='text/css'>img{ " +
" -moz-animation:.6s rotateRight infinite linear; " +
" -webkit-animation:.6s rotateRight infinite linear; " +
"}" + ...
).appendTo("head");

Please pay attention that it's not recommended to do something like this:

$("<style type='text/css'>img{ \
    -moz-animation:.6s rotateRight infinite linear; \
    -webkit-animation:.6s rotateRight infinite linear; \
} \
...

The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript.

Google JavaScript Style Guide

Integrate style tag using css

4 Answers4