blocks|key|1489665|text|您可以创建样式元素并将其插入到DOM中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489666|$("<style+type='text/css'>+.redbold{+color:#f00;+font-weight:bold;}+</style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME+NEW+TEXT").appendTo("body");|code-block|syntax|javascript|1489667|在Opera10+FF3.5+iE8+iE6上测试|1489668|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can create style element and insert it into DOM

<pre><code>$("&lt;style type='text/css'&gt; .redbold{ color:#f00; font-weight:bold;} &lt;/style&gt;").appendTo("head");
$("&lt;div/&gt;").addClass("redbold").text("SOME NEW TEXT").appendTo("body");
</code></pre>

tested on Opera10 FF3.5 iE8 iE6

blocks|key|1490008|text|简单地说|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1490009|$("<style>")
++++.prop("type",+"text/css")
++++.html("\
++++#my-window+{\
++++++++position:+fixed;\
++++++++z-index:+102;\
++++++++display:none;\
++++++++top:50%25;\
++++++++left:50%25;\
++++}")
++++.appendTo("head");|code-block|syntax|javascript|1490010|注意到后面的斜杠了吗？它们用于连接新行上的字符串。省略它们会产生一个错误。|1490011|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Simply 

<pre><code>$("&lt;style&gt;")
 .prop("type", "text/css")
 .html("\
 #my-window {\
 position: fixed;\
 z-index: 102;\
 display:none;\
 top:50%;\
 left:50%;\
 }")
 .appendTo("head");
</code></pre>

Noticed the back slashes? They are used to join strings that are on new lines. Leaving them out generates an error.

blocks|key|1274728|text|您可以将css应用于对象。因此，您可以在javascript中定义对象，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274729|var+my_css_class+=+{+backgroundColor+:+'blue',+color+:+'#fff'+};|code-block|syntax|javascript|1274730|然后简单地将它应用于您想要的所有元素|1274731|$("#myelement").css(my_css_class);|1274732|所以它是可重用的。你这样做的目的是什么呢？|1274733|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

you can apply css an an object. So you can define your object in your javascript like this:

<pre><code>var my_css_class = { backgroundColor : 'blue', color : '#fff' };
</code></pre>

And then simply apply it to all the elements you want

<pre><code>$("#myelement").css(my_css_class);
</code></pre>

So it is reusable. What purpose would you do this for though?

blocks|key|1275248|text|根据dottoro的说法，如果你不需要支持IE+<+9，你可以使用insertRule。这里也有一些跨浏览器的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1275249|document.styleSheets[0].insertRule('#my-window+{\
++++position:+fixed;\
++++z-index:+102;\
++++display:none;\
++++top:50%25;\
++++left:50%25;\
}',+0)|code-block|syntax|javascript|1275250|entityMap|0|LINK|mutability|MUTABLE|url|http://help.dottoro.com/ljvmpkap.php|1|https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule^0|2|7|0|X|A|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule">insertRule</a> if you don't need to support IE &lt; 9, according to <a href="http://help.dottoro.com/ljvmpkap.php">dottoro</a>. There's a bit of cross browser code over there as well.

<pre><code>document.styleSheets[0].insertRule('#my-window {\
 position: fixed;\
 z-index: 102;\
 display:none;\
 top:50%;\
 left:50%;\
}', 0)
</code></pre>

blocks|key|1490032|text|这是一个允许你注入CSS的jquery插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1490033|https://github.com/kajic/jquery-injectCSS|offset|length|1490034|示例：|1490035|$.injectCSS({
++++"#my-window":+{
++++++++"position":+"fixed",
++++++++"z-index":+102,
++++++++"display":+"none",
++++++++"top":+"50%25",
++++++++"left":+"50%25"
++++}
});|code-block|syntax|javascript|1490036|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

Here is a jquery plugin that allows you to inject CSS:

<a href="https://github.com/kajic/jquery-injectCSS" rel="noreferrer">https://github.com/kajic/jquery-injectCSS</a>

Example:

<pre><code>$.injectCSS({
 "#my-window": {
 "position": "fixed",
 "z-index": 102,
 "display": "none",
 "top": "50%",
 "left": "50%"
 }
});
</code></pre>

blocks|key|1274789|text|如果不想将CSS硬编码到CSS块/文件中，可以使用jQuery动态地将CSS添加到HTML元素、ID和类中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274790|$(document).ready(function()+{
++//Build+your+CSS.
++var+body_tag_css+=+{
++++"background-color":+"#ddd",
++++"font-weight":+"",
++++"color":+"#000"
++}
++//Apply+your+CSS+to+the+body+tag.++You+can+enter+any+tag+here,+as
++//well+as+ID's+and+Classes.
++$("body").css(body_tag_css);
});|code-block|syntax|javascript|1274791|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you don't want to hardcode the CSS into a CSS block/file, you can use jQuery to dynamically add CSS to HTML Elements, ID's, and Classes.

<pre><code>$(document).ready(function() {
 //Build your CSS.
 var body_tag_css = {
 "background-color": "#ddd",
 "font-weight": "",
 "color": "#000"
 }
 //Apply your CSS to the body tag. You can enter any tag here, as
 //well as ID's and Classes.
 $("body").css(body_tag_css);
});
</code></pre>

blocks|key|1275113|text|如果您创建的jQuery构件需要自定义CSS+(例如，为您的特定构件扩展现有的jQueryUI+CSS框架)，则添加自定义规则非常有用。这个解决方案建立在Taras的答案(上面的第一个)之上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275114|假设您的HTML标记有一个id为"addrule“的按钮和一个id为"target”的div，其中包含一些文本：|1275115|jQuery代码：|1275116|$(+"#addrule"+).click(function+()+{+addcssrule($("#target"));+});

function+addcssrule(target)+
{+
var+cssrules+=++$("<style+type='text/css'>+</style>").appendTo("head");

cssrules.append(".redbold{+color:#f00;+font-weight:bold;}");+
cssrules.append(".newfont+{font-family:+arial;}");+
target.addClass("redbold+newfont");+++++
}+++++++|code-block|syntax|javascript|1275117|这种方法的优点是，您可以在代码中重用变量cssrules来随意添加或减少规则。如果cssrules被嵌入到持久对象中，比如jQuery小部件，那么您就有一个持久的局部变量可用了。|1275118|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Adding custom rules is useful if you create a jQuery widget that requires custom CSS (such as extending the existing jQueryUI CSS framework for your particular widget). This solution builds on Taras's answer (the first one above). 

Assuming your HTML markup has a button with an id of "addrule" and a div with an id of "target" containing some text: 

jQuery code: 

<pre><code>$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules = $("&lt;style type='text/css'&gt; &lt;/style&gt;").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont"); 
} 
</code></pre>

The advantage of this approach is that you can reuse variable cssrules in your code to add or subtract rules at will. If cssrules is embedded in a persistent object such as a jQuery widget you have a persistent local variable to work with.

blocks|key|1275384|text|在(不常见的)情况下，如果您希望能够经常动态更改样式--例如主题构建器应用程序--添加标记或调用CSSStyleSheet.insertRule()将导致样式表不断增长，这可能会对性能和设计调试产生影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275385|我的方法只允许每个选择器/属性组合使用一个规则，清除设置任何规则时存在的任何规则。该API简单而灵活：|1275386|function+addStyle(selector,+rulename,+value)+{
++++var+stylesheet+=+getAppStylesheet();
++++var+cssRules+=+stylesheet.cssRules+%7C%7C+stylesheet.rules;
++++var+rule+=+stylesheet.insertRule(selector+%2B+'+{+'+%2B+rulename+%2B+':'+%2B+value+%2B+';}',+cssRules.length);
}

function+clearStyle(selector,+rulename)+{
++++var+stylesheet+=+getAppStylesheet();
++++var+cssRules+=+stylesheet.cssRules+%7C%7C+stylesheet.rules;
++++for+(var+i=0;+i<cssRules.length;+i%2B%2B)+{
++++++++var+rule+=+cssRules[i];
++++++++if+(rule.selectorText+==+selector+&&+rule.style[0]+==+rulename)+{
++++++++++++stylesheet.deleteRule(i);
++++++++++++break;
++++++++}
++++}+++++++
}

function+addStyles(selector,+rules)+{
++++var+stylesheet+=+getAppStylesheet();
++++var+cssRules+=+stylesheet.cssRules+%7C%7C+stylesheet.rules;
++++for+(var+prop+in+rules)+{
++++++++addStyle(selector,+prop,+rules[prop]);
++++}
}

function+getAppStylesheet()+{
++++var+stylesheet+=+document.getElementById('my-styles');
++++if+(!stylesheet)+{
++++++++stylesheet+=+$('<style+id="my-styles">').appendTo('head')[0];
++++}
++++stylesheet+=+stylesheet.sheet;
++++return+stylesheet;
}|code-block|syntax|javascript|1275387|用法：|1275388|addStyles('body',+{
++++'background-color':+'black',
++++color:+'green',
++++margin:+'auto'
});

clearStyle('body',+'background-color');
addStyle('body',+'color',+'#333')|1275389|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In (unusual) cases where you want to be able to dynamically change styles often -- e.g. a theme builder app -- adding &lt;style&gt; tags or calling CSSStyleSheet.insertRule() will result in a growing stylesheet, which can have performance and design debugging implications. 

My approach only allows a single rule per selector/property combo, clearing any existing on setting any rule. The API is simple and flexible:

<pre><code>function addStyle(selector, rulename, value) {
 var stylesheet = getAppStylesheet();
 var cssRules = stylesheet.cssRules || stylesheet.rules;
 var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
 var stylesheet = getAppStylesheet();
 var cssRules = stylesheet.cssRules || stylesheet.rules;
 for (var i=0; i&lt;cssRules.length; i++) {
 var rule = cssRules[i];
 if (rule.selectorText == selector &amp;&amp; rule.style[0] == rulename) {
 stylesheet.deleteRule(i);
 break;
 }
 } 
}

function addStyles(selector, rules) {
 var stylesheet = getAppStylesheet();
 var cssRules = stylesheet.cssRules || stylesheet.rules;
 for (var prop in rules) {
 addStyle(selector, prop, rules[prop]);
 }
}

function getAppStylesheet() {
 var stylesheet = document.getElementById('my-styles');
 if (!stylesheet) {
 stylesheet = $('&lt;style id="my-styles"&gt;').appendTo('head')[0];
 }
 stylesheet = stylesheet.sheet;
 return stylesheet;
}
</code></pre>

Usage:

<pre><code>addStyles('body', {
 'background-color': 'black',
 color: 'green',
 margin: 'auto'
});

clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')
</code></pre>

blocks|key|1274668|text|如果您在页面上动态编写了一个<+script+>部分(使用动态规则)，然后使用jQuerys+.addClass(类)来添加这些动态创建的规则，情况会怎样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1274669|我没有尝试过这一点，只是提供了一个可能可行的理论。|1274670|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

What if you dynamically wrote a &lt; script > section on your page (with your dynamic rules) and then used jQuerys .addClass( class ) to add those dynamically created rules?

I have not tried this, just offering a theory that might work.

blocks|key|1489498|text|回答这个问题有点懒惰，但下面的文章可能会有所帮助：http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1489499|另外，试着在google中输入“修改css规则”|1489500|我不确定如果您尝试用jQuery()包装document.styleSheets会发生什么，但是您可以试一试|1489501|entityMap|0|LINK|mutability|MUTABLE|url|http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml^0|P|1N|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

Bit of a lazy answer this, but the following article may help:
<a href="http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml" rel="nofollow noreferrer">http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml</a>

Also, try typing "modify css rules" into google

Not sure whatwould happen if you tried to wrap a document.styleSheets[0] with jQuery() though you could give it a try

blocks|key|1275065|text|您可以使用cssRule+plug-in。当时的代码很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1275066|$.cssRule("#my-window+{
++++position:+fixed;
++++z-index:+102;
++++display:none;
++++top:50%25;
++++left:50%25;
}");|code-block|syntax|javascript|1275067|到目前为止，有一条评论问为什么要做这样的事情。例如，为列表创建样式，其中每个项目都需要不同的背景颜色(例如，GCal的日历列表)，其中列数直到运行时才知道。|1275068|entityMap|0|LINK|mutability|MUTABLE|url|http://projects.pro.br/gsaraiva/jquerycssrule/^0|5|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

You can use a the <a href="http://projects.pro.br/gsaraiva/jquerycssrule/" rel="nofollow">cssRule plug-in</a>. The code was simple then:

<pre><code>$.cssRule("#my-window {
 position: fixed;
 z-index: 102;
 display:none;
 top:50%;
 left:50%;
}");
</code></pre>

One of the comments so far asked why one would want to do such a thing. For example, creating styles for a list where each item needs a distinct background colour (eg. GCal's list of calendars) where the number of columns is not known until run time.

blocks|key|1490292|text|这是一个通过这个json对象给出颜色命令的设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1490293|+"colors":+{
++++"Backlink":+["rgb(245,245,182)","rgb(160,82,45)"],
++++"Blazer":+["rgb(240,240,240)"],
++++"Body":+["rgb(192,192,192)"],
++++"Tags":+["rgb(182,245,245)","rgb(0,0,0)"],
++++"Crosslink":+["rgb(245,245,182)","rgb(160,82,45)"],
++++"Key":+["rgb(182,245,182)","rgb(0,118,119)"],
++++"Link":+["rgb(245,245,182)","rgb(160,82,45)"],
++++"Link1":+["rgb(245,245,182)","rgb(160,82,45)"],
++++"Link2":+["rgb(245,245,182)","rgb(160,82,45)"],
++++"Manager":+["rgb(182,220,182)","rgb(0,118,119)"],
++++"Monitor":+["rgb(255,230,225)","rgb(255,80,230)"],
++++"Monitor1":+["rgb(255,230,225)","rgb(255,80,230)"],
++++"Name":+["rgb(255,255,255)"],
++++"Trail":+["rgb(240,240,240)"],
++++"Option":+["rgb(240,240,240)","rgb(150,150,150)"]
++}|code-block|syntax|javascript|1490294|此函数|1490295|+function+colors(fig){
++++var+html,k,v,entry,
++++html+=+[]
++++$.each(fig.colors,function(k,v){
++++++++entry++=+"."+%2B+k+;
++++++++entry+%2B=+"{+background-color+:"%2B+v[0]%2B";";
++++++++if(v[1])+entry+%2B=+"+color+:"%2B+v[1]%2B";";
++++++++entry+%2B=+"}"
++++++++html.push(entry)
++++});
++++$("head").append($(document.createElement("style"))
++++++++.html(html.join("\n"))
++++)
}|1490296|生成此样式元素|1490297|.Backlink{+background-color+:rgb(245,245,182);+color+:rgb(160,82,45);}
.Blazer{+background-color+:rgb(240,240,240);}
.Body{+background-color+:rgb(192,192,192);}
.Tags{+background-color+:rgb(182,245,245);+color+:rgb(0,0,0);}
.Crosslink{+background-color+:rgb(245,245,182);+color+:rgb(160,82,45);}
.Key{+background-color+:rgb(182,245,182);+color+:rgb(0,118,119);}
.Link{+background-color+:rgb(245,245,182);+color+:rgb(160,82,45);}
.Link1{+background-color+:rgb(245,245,182);+color+:rgb(160,82,45);}
.Link2{+background-color+:rgb(245,245,182);+color+:rgb(160,82,45);}
.Manager{+background-color+:rgb(182,220,182);+color+:rgb(0,118,119);}
.Monitor{+background-color+:rgb(255,230,225);+color+:rgb(255,80,230);}
.Monitor1{+background-color+:rgb(255,230,225);+color+:rgb(255,80,230);}
.Name{+background-color+:rgb(255,255,255);}
.Trail{+background-color+:rgb(240,240,240);}
.Option{+background-color+:rgb(240,240,240);+color+:rgb(150,150,150);}|1490298|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Here's a setup that gives command over colors with this json object

<pre><code> "colors": {
 "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
 "Blazer": ["rgb(240,240,240)"],
 "Body": ["rgb(192,192,192)"],
 "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
 "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
 "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
 "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
 "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
 "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
 "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
 "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
 "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
 "Name": ["rgb(255,255,255)"],
 "Trail": ["rgb(240,240,240)"],
 "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
 }
</code></pre>

this function

<pre><code> function colors(fig){
 var html,k,v,entry,
 html = []
 $.each(fig.colors,function(k,v){
 entry = "." + k ;
 entry += "{ background-color :"+ v[0]+";";
 if(v[1]) entry += " color :"+ v[1]+";";
 entry += "}"
 html.push(entry)
 });
 $("head").append($(document.createElement("style"))
 .html(html.join("\n"))
 )
}
</code></pre>

to produce this style element

<pre><code>.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}
</code></pre>

blocks|key|1489811|text|如果你不想分配一个display:none给一个css类，正确的方法是附加到样式中，jQuery.Rule可以做这件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489812|在某些情况下，您希望在ajax内容的append事件之前应用stiles，并在append之后淡出内容，这就是它！|1489813|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

if you don' t want to assign a display:none to a css class, the right approach in to append to style, jQuery.Rule do the job.

I some cases you want to apply stiles before the append event of ajax content and fade content after append and this is it!

blocks|key|1275224|text|下面是一个获取CSS类完整定义的函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275225|getCSSStyle+=+function+(className)+{
+++for+(var+i+=+0;+i+<+document.styleSheets.length;+i%2B%2B)+{
+++++++var+classes+=+document.styleSheets[i].rules+%7C%7C+document.styleSheets[i].cssRules;
+++++++for+(var+x+=+0;+x+<+classes.length;+x%2B%2B)+{
+++++++++++if+(classes[x].selectorText++&&+-+1+!=+classes[x].selectorText.indexOf(className))+{
+++++++++++++++return+classes[x].cssText+%7C%7C+classes[x].style.cssText;
+++++++++++}
+++++++}
+++}
+++return+'';
};|code-block|syntax|javascript|1275226|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here you have a function to get the full definition of a CSS class:

<pre><code>getCSSStyle = function (className) {
 for (var i = 0; i &lt; document.styleSheets.length; i++) {
 var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
 for (var x = 0; x &lt; classes.length; x++) {
 if (classes[x].selectorText &amp;&amp; - 1 != classes[x].selectorText.indexOf(className)) {
 return classes[x].cssText || classes[x].style.cssText;
 }
 }
 }
 return '';
};
</code></pre>

blocks|key|1490155|text|您可以使用这个名为cssobj的库|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1490156|var+result+=+cssobj({'#my-window':+{
++position:+'fixed',
++zIndex:+'102',
++display:'none',
++top:'50%25',
++left:'50%25'
}})|code-block|syntax|javascript|1490157|任何时候，您都可以像这样更新规则：|1490158|result.obj['#my-window'].display+=+'block'
result.update()|1490159|然后你改变了规则。jQuery不是执行此操作的库。|1490160|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cssobj/cssobj^0|9|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

You can use this lib called <a href="https://github.com/cssobj/cssobj" rel="nofollow">cssobj</a>

<pre><code>var result = cssobj({'#my-window': {
 position: 'fixed',
 zIndex: '102',
 display:'none',
 top:'50%',
 left:'50%'
}})
</code></pre>

Any time you can update your rules like this:

<pre><code>result.obj['#my-window'].display = 'block'
result.update()
</code></pre>

Then you got the rule changed. jQuery is not the lib doing this.

blocks|key|1489734|text|我最近一直在处理其中的一些问题，并且在编写iPhone+/+iPod站点时使用了两种不同的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489735|我在寻找方向变化时遇到的第一种方式是，你可以看到手机是纵向的还是横向的，这是一个非常静态的方式，但简单而巧妙：|1489736|在CSS中：|1489737|#content_right,
#content_normal{
+display:none;
}|code-block|syntax|javascript|1489738|在JS文件中：|1489739|function+updateOrientation(){
++var+contentType+=+"show_";
++switch(window.orientation){
+++case+0:
+++contentType+%2B=+"normal";
+++break;

+++case+-90:
+++contentType+%2B=+"right";
+++break;+document.getElementById("page_wrapper").setAttribute("class",contentType);
}|1489740|在PHP/HTML中(首先导入JS文件，然后在body标记中导入)：|1489741|<body+onorientationchange="updateOrientation();">|1489742|这基本上是根据从JS文件返回的结果选择一个不同的预设CSS块来运行。|1489743|此外，我更喜欢的更动态的方式是向脚本标记或JS文件添加一个非常简单的内容：|1489744|document.getelementbyid(id).style.backgroundColor+=+'#ffffff';|1489745|这适用于大多数浏览器，但对于IE来说，最好是用更紧凑的东西来夺走它的弹药：|1489746|var+yourID+=+document.getelementbyid(id);+
+if(yourID.currentstyle)+{+
++yourID.style.backgroundColor+=+"#ffffff";++++++//+for+ie+:@+
+}+else+{+
++yourID.style.setProperty("background-color",+"#ffffff");++++++++//+everything+else+:)
+}|1489747|或者，您可以使用getElementByClass()并更改一系列项目。|offset|length|style|CODE|1489748|希望这能有所帮助！|1489749|阿什。|1489750|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|8|J|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1J|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1L|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|H|7|1O|8|@]|9|@]|A|$I|J]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|H|7|1Q|8|@]|9|@]|A|$I|J]]|$1|12|3|13|5|6|7|1R|8|@$14|1S|15|1T|16|17]]|9|@]|A|$]]|$1|18|3|19|5|6|7|1U|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|1V|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|1D|$]]

I have been messing with some of this recently and i have used two different approaches when programming an iPhone / iPod site.

The first way I came across when looking for orientation changes so you can see whether the phone is portrait or landscape, this is a very static way but simple and clever:

In CSS :

<pre><code>#content_right,
#content_normal{
 display:none;
}
</code></pre>

In JS File:

<pre><code>function updateOrientation(){
 var contentType = "show_";
 switch(window.orientation){
 case 0:
 contentType += "normal";
 break;

 case -90:
 contentType += "right";
 break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}
</code></pre>

In PHP/HTML (Import your JS file first then in body tag):

<pre><code>&lt;body onorientationchange="updateOrientation();"&gt;
</code></pre>

This basically chooses a different pre set CSS block to run depending on the result given back from the JS file.

Also the more dynamic way which I preferred was a very simple addition to a script tag or your JS file:

<pre><code>document.getelementbyid(id).style.backgroundColor = '#ffffff';
</code></pre>

This works for most browsers but for IE it's best to take away it's ammunition with something tighter:

<pre><code>var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
 yourID.style.backgroundColor = "#ffffff"; // for ie :@ 
 } else { 
 yourID.style.setProperty("background-color", "#ffffff"); // everything else :)
 }
</code></pre>

Or you can use <code>getElementByClass()</code> and change a range of items.

Hope this helps!

Ash.

blocks|key|1489364|text|也许你可以将样式信息放在css文件的一个单独的类中，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489365|.specificstyle+{
++++position:+fixed;
++++z-index:+102;
++++display:none;
++++top:50%25;
++++left:50%25;
}|code-block|syntax|javascript|1489366|然后在选择将这个类名添加到元素时使用jQuery？|1489367|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Maybe you can put the style information in a separate class in your css file, e.g.:

<pre><code>.specificstyle {
 position: fixed;
 z-index: 102;
 display:none;
 top:50%;
 left:50%;
}
</code></pre>

and then use jQuery at the point of your choosing to add this classname to the element?

blocks|key|1489402|text|您可以只创建一个名为.fixed-object的css类，其中包含您所有的css……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1489403|.fixed-object{
++++position:+fixed;
++++z-index:+102;
++++display:none;
++++top:50%25;
++++left:50%25;
}|code-block|syntax|javascript|1489404|然后，在jquery中，当你想要拥有某种风格的东西时，只需将该类添加到其中即可。|1489405|$(#my-window).addClass('fixed-object');|1489406|这似乎是最简单的方法，除非我误解了你需要做的事情。|1489407|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You could just make a css class called something like .fixed-object that has all your css in it...

<pre><code>.fixed-object{
 position: fixed;
 z-index: 102;
 display:none;
 top:50%;
 left:50%;
}
</code></pre>

Then in jquery anytime you want something to have that style just add that class to it...

<pre><code>$(#my-window).addClass('fixed-object');
</code></pre>

That seems like the easiest way to do it, unless I'm misunderstanding what you need done.

blocks|key|1275143|text|通过在jquery中使用.addClass()，我们可以动态地为页面上的元素添加样式。例如：我们有风格|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275144|.myStyle
{
++width:500px;
++height:300px;
++background-color:red;
+}|code-block|syntax|javascript|1275145|现在，在jquery的就绪状态下，我们可以添加像.addClass(myStyle)这样的css。|1275146|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

By using .addClass() in jquery we can dynamically add style to elements on page.
eg. we have style

<pre><code>.myStyle
{
 width:500px;
 height:300px;
 background-color:red;
 }
</code></pre>

Now in ready state of jquery we can add css like
.addClass(myStyle)

Usually I have a CSS file which has the following rule:

<pre><code>#my-window {
 position: fixed;
 z-index: 102;
 display:none;
 top:50%;
 left:50%;
}
</code></pre>

How can I avoid creating such a static CSS file by adding the CSS information during runtime actions to the body, or something similar? (only using jQuery)

I want to define it once but with jQuery and use it many times later; that's why I do not want to add it each time to the specific DOM elements.

I know the simple features (<code>css("attr1", "value");</code>), but how can I create a complete reusable CSS rule?

Create a CSS rule / class with jQuery at runtime

jQuery

通常我有一个CSS文件，它有以下规则：#my-window {    position: fixed;    z-index: 102;    display:none;    top:50%;    left:50%;}如何通过在运行时操作期间将CSS信息添加到正文或类似内容来避免创建这样的静态CSS文件？(仅使用jQuery)我想用jQuery定义它一次，然后多次使用它；这就是为什么我不想每次

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

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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