使用CSS集成样式标签

Question

我试图使用jQuery将<style type="text/css"></style>添加到头部。 我尝试了这样

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

以前，我有这样的类型：

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

那种样式在用jquery实现时是可行的，就像这样：

$("<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");

但是我在编辑器中遇到了错误。这是图片： 我想我搞砸了什么 :( 这是链接：http://jsfiddle.net/jSvUE/

如果有任何建议，都非常感谢。 谢谢， 维基

- Vignesh Pichamani

---

只是出于好奇，你为什么要这样做？ - putvande

据我所知，在Javascript字符串中，您无法使用实际的换行符（回车键）。要么将其放在一行中，要么使用Javascript动态加载/启用样式表。请看这个链接：https://dev59.com/k2kw5IYBdhLWcg3wE2dA#10154554 - Scott

你可以在每行末尾添加一个 \\（正斜杠？）然后再试一次吗？ - putvande

Answer 1

尝试

$("<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");

工作示例：http://jsfiddle.net/jSvUE/2/

这个方法很hackish（译注：指实现不太优雅或高质量），但如果想要快速且肮脏的解决方案，它可以工作。 这里的思路是转义换行符。 一种更优雅的方式是将img设置为类，并使用http://api.jquery.com/toggleClass/来切换动画效果。

更新 2016

到了2016年，ES6得到广泛支持，上述hack可以用以下仍然糟糕的代码块来替代：

$(`<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");

- Scott

---

这就是我说的;-) - putvande

哈哈，是的，我在看到你的评论之前已经开始写这篇文章了。 - Scott

+1 谢谢。我在想为什么会发生这种情况；-）无论如何，我得到了一个快速有效的解决方案。 - Vignesh Pichamani

Answer 2

我不确定你为什么这样做，但是你的问题是无法在JavaScript中换行，请尝试以下方法：

$("<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");

一个例子是 这里，如果它是一个字符串，可以把所有内容都放在一行上。或者，如果你想保持漂亮的格式，就用加号来换行。

- Dominic Green

Answer 3

问题出在JS中的换行符。您可以将样式存储在变量中，然后将其附加到头部，以便样式可重复使用：

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

- David Randall

Answer 4

唯一有效的方法是字符串拼接：

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

请注意，不建议做类似以下的操作：

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

每行开头的空格不能在编译时被安全地剥离；斜杠后面的空格会导致棘手的错误；虽然大多数脚本引擎支持此功能，但它不是 ECMAScript 的一部分。

Google JavaScript Style Guide

- Warlock