使用 css 集成样式标签答案

【问题标题】：Integrate style tag using css使用 css 集成样式标签
【发布时间】：2015-12-04 05:04:01
【问题描述】：

我尝试使用 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/

任何建议都会很棒谢谢，维姬

【问题讨论】：

只是出于好奇，你为什么要这样做？
AFAIK 你不能在 Javascript 字符串中有实际的新行（输入键）。要么使它成为一行，要么使用 Javascript 动态加载/启用样式表。看看这个：stackoverflow.com/a/10154554/382456
您可以在每行的末尾添加一个`\`（正斜杠？）然后再试一次？

标签： javascript jquery html css

【解决方案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/

真的很老套，但对于快速n-dirty 的解决方案，它会起作用。这里的想法是转义新行。不过，实现这一点的更优雅的方法是将img 作为一个类，并使用http://api.jquery.com/toggleClass/ 来切换动画。

2016 年更新

在 2016 年，ES6 得到了广泛的支持，上面的 hack 可以用这个仍然可怕的 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");

【讨论】：

我就是这么说的 ;-)
哈，是啊，在看到你的评论之前我已经开始写帖子了。
+1 谢谢，我想知道为什么会发生这种情况 ;-) 无论如何我都能得到一个快速有效的解决方案

【解决方案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");

一个例子是here 如果它是一个字符串，则将所有内容都放在一行上。或者，如果您想保持良好的格式，请使用 +

换行

【讨论】：

【解决方案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);

【讨论】：

感谢您的回复 +1。

【解决方案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

【讨论】：