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/

どんな提案も素晴らしいでしょう、ありがとう、ヴィッキー

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/

本当にハックですが、簡単で汚れたソリューションの場合、それは機能します。ここでの考え方は、新しい行をエスケープしているということです。 ただし、これを実現するためのより洗練された方法は、それimgをクラスとして配置し、 http://api.jquery.com/toggleClass/を使用してアニメーションを切り替えることです。

2016年更新

ここ 2016 年には、ES6 が広くサポートされており、上記のハックは、この恐ろしいブロブに置き換えることができます。

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

例を次に示します。文字列の場合は、すべてを 1 行にまとめます。または、適切な書式設定を維持したい場合は、 + で改行します

于 2013-10-18T13:56:40.180 に答える
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 の一部ではありません。

Google JavaScript スタイル ガイド

于 2013-10-18T14:08:46.450 に答える