jQuery CSS - 写入 <style>-tag
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4232557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery CSS - Write into the <style>-tag
提问by Peter
I want to change the background-colorof the bodyof my HTML document. My problem is that jQuery adds the style to the bodytag, but I want to change the value in the styletag. Is this possible using jQuery?
我想改变background-color的body我的HTML文档。我的问题是 jQuery 将样式添加到body标签中，但我想更改style标签中的值。这可以使用jQuery吗？
Example-Code
示例代码
<style title="css_style" type="text/css">
body {
background-color:#dc2e2e; /* <- CHANGE THIS */
color:#000000;
font-family:Tahoma, Verdana;
font-size:11px;
margin:0px;
padding:0px;
background-image: url(http://abc.de/image.jpg);
}
</style>
...
<body>
// ....
</body>
jQuery
jQuery
$('body').css('background-color','#ff0000');
Result
结果
<body style="background-color:#ff0000;">
// ....
</body>
采纳答案by Dr.Molle
The are specific methods for manipulating stylesheets,
是操作样式表的具体方法，
DOM: insertRule()
Microsoft: addRule()
DOM：insertRule()
微软：addRule()
I just made a method for jQuery(maybe somebody else already did, I don't know)
我刚刚为 jQuery 做了一个方法（也许其他人已经做了，我不知道）
(
function( $ )
{
$.style={
insertRule:function(selector,rules,contxt)
{
var context=contxt||document,stylesheet;
if(typeof context.styleSheets=='object')
{
if(context.styleSheets.length)
{
stylesheet=context.styleSheets[context.styleSheets.length-1];
}
if(context.styleSheets.length)
{
if(context.createStyleSheet)
{
stylesheet=context.createStyleSheet();
}
else
{
context.getElementsByTagName('head')[0].appendChild(context.createElement('style'));
stylesheet=context.styleSheets[context.styleSheets.length-1];
}
}
if(stylesheet.addRule)
{
for(var i=0;i<selector.length;++i)
{
stylesheet.addRule(selector[i],rules);
}
}
else
{
stylesheet.insertRule(selector.join(',') + '{' + rules + '}', stylesheet.cssRules.length);
}
}
}
};
}
)( jQuery );
Example usage:
用法示例：
$.style.insertRule(['p','h1'], 'color:red;')
$.style.insertRule(['p'], 'text-decoration:line-through;')
$.style.insertRule(['div p'], 'text-decoration:none;color:blue')
the second argument should be clear, the rules. As optional 3rd argument the context-document can be supplied.
The first argument are the selectors as array-elements.
Note that you dont have to use there different selector separated by comma, as MSIE only accepts "Single contextual selectors" as argument for addRule()
第二个参数应该是明确的，规则。作为可选的第三个参数，可以提供上下文文档。
第一个参数是作为数组元素的选择器。
请注意，您不必使用逗号分隔的不同选择器，因为 MSIE 仅接受“单个上下文选择器”作为 addRule() 的参数
Check out the fiddle: http://jsfiddle.net/doktormolle/ubDDd/
回答by J?rn Zaefferer
While not changing an existing style element, this works as a cross-browser way to create a new one:
在不更改现有样式元素的同时，这是一种跨浏览器创建新样式元素的方式：
$( "<style>body { background: black; }</style>" ).appendTo( "head" )
By cascading, it'll override existing styles, which should do the trick.
通过级联，它将覆盖现有的样式，这应该可以解决问题。
回答by Shaoz
jQuery always adds its CSS in the tag itself.
jQuery 总是在标签本身中添加它的 CSS。
I think you should use the append()function with a new body style rule.
我认为您应该使用append()具有新体型规则的函数。
Like this:
像这样：
var newRule = "body{ /*your CSS rule here...*/ }";
$("style").append(newRule);
or
或者
$("body").css({ /*CSS rule...*/ });
I hope this is what you meant...
我希望这就是你的意思...
回答by bobwirka
I was able to modify the section by adding to it's html.
我能够通过添加到它的 html 来修改该部分。
var styleText = $('style').html();
styleText += '\n' + '#TabName div ul li a {border-top-left-radius:5px;}';
$('style').html(styleText);
回答by Asinus Rex
Perhaps it's easier to copy all the existing rules to a string, add your stuff or modify what's in there, delete the existing tag and replacing it modified, like so:
也许将所有现有规则复制到字符串、添加内容或修改其中的内容、删除现有标签并替换修改后的内容更容易，如下所示：
//Initialize variable
var cssRules = '';
//Copy existing rules
for (var i = 0; i < document.styleSheets[0].cssRules.length; i++) {
cssRules += document.styleSheets[0].cssRules[i].cssText;
}
//Delete existing node
$('style').remove();
// .... Add stuff to cssRules
//Append new nodes
$('<style>' + cssRules + '</style>').appendTo('head');
回答by Bahar
You can change your body class but you cannot change your style tag:
你可以改变你的身体类别，但你不能改变你的风格标签：
HTML:
HTML：
<style title="css_style" type="text/css">
.highlight
{
background-color:#ff0000;
}
</style>
JavaScript:
JavaScript：
$('body').toggleClass(".highlight");
回答by tokland
As commented above, jqueryEl.textshould also work:
如上所述，jqueryEl.text也应该工作：
$("<style/>").text(css).appendTo(document.head);
回答by Dan Caseley
My page had multiple style tags, so needed a slightly more surgical approach.
我的页面有多个样式标签，所以需要一个稍微手术式的方法。
I riffed on Asinus' answer, and expanded it to grab the rules from ALL stylesheets, but only where the stylesheet came from a <style>tag.
我对 Asinus 的回答进行了重复，并将其扩展为从所有样式表中获取规则，但仅限于样式表来自<style>标签的位置。
var cssRules = '';
//Copy existing rules for <style> tags
for (var i=0; i < document.styleSheets.length; i++){
var stylesheet = document.styleSheets[i];
if (stylesheet.ownerNode.tagName !== 'STYLE'){
continue
}
for (var j = 0; j < stylesheet.cssRules.length; j++) {
cssRules += stylesheet.cssRules[j].cssText;
cssRules += '\n'
}
}
jQuery('style').remove(); //Delete existing node
cssRules += '*, :before, :after {animation: none !important;}' //Add new rules
jQuery('<style>' + cssRules + '</style>').appendTo('head'); //Append new nodes
![jQuery 未捕获的 TypeError: ((x.event.special[i.origType] || (intermediate value)).handle || i.handler).apply 不是函数](/res/img/loading.gif)