在运行时使用jQuery创建CSS规则/类

Question

在运行时使用jQuery创建CSS规则/类

通常我有一个CSS文件，它有以下规则：

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;}

如何通过在运行时操作期间将CSS信息添加到正文或类似的东西来避免创建这样的静态CSS文件？（仅使用jQuery）

我想用jQuery定义一次，然后多次使用它; 这就是为什么我不想每次都将它添加到特定的DOM元素。

我知道简单的功能（css("attr1", "value");），但是如何创建完整的可重用CSS规则？

Answer 1

只是$("<style>") &nbsp;&nbsp;&nbsp;&nbsp;.prop("type",&nbsp;"text/css") &nbsp;&nbsp;&nbsp;&nbsp;.html("\ &nbsp;&nbsp;&nbsp;&nbsp;#my-window&nbsp;{\ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed;\ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;102;\ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:none;\ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:50%;\ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:50%;\ &nbsp;&nbsp;&nbsp;&nbsp;}") &nbsp;&nbsp;&nbsp;&nbsp;.appendTo("head");注意到背斜线？它们用于连接新行上的字符串。离开它们会产生错误。

Answer 2

你可以将css应用于一个对象。所以你可以在你的javascript中定义你的对象，如下所示：var&nbsp;my_css_class&nbsp;=&nbsp;{&nbsp;backgroundColor&nbsp;:&nbsp;'blue',&nbsp;color&nbsp;:&nbsp;'#fff'&nbsp;};然后只需将其应用于您想要的所有元素$("#myelement").css(my_css_class);所以它是可重用的。你会这样做的目的是什么？