6

我尝试<style type="text/css"></style>使用 jquery 添加到头。我试过这样

 $("<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/

任何建议都会很棒谢谢，vicky

4

4 回答 4

4

尝试

$("<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");
于 2013-10-18T13:57:01.187 回答
1

我不知道你为什么这样做，但你的问题是你不能在 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");

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

于 2013-10-18T13:56:40.180 回答
1

问题在于 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);
于 2013-10-18T14:01:27.280 回答
1

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

$("<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 的一部分。

谷歌 JavaScript 风格指南

于 2013-10-18T14:08:46.450 回答