jQuery CSS – 写入<style> – 标签
我想改变HTML文档body的background-color 。 我的问题是，jQuery将样式添加到body标记，但我想要更改style标记中的值。 这可能使用jQuery？
例如，代码
<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的
$('body').css('background-color','#ff0000');
结果
<body style="background-color:#ff0000;"> // .... </body>
这是操作样式表的具体方法，
DOM： insertRule（）
微软： addRule（）
我只是提出了一个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 );
用法示例：
$.style.insertRule(['p','h1'], 'color:red;') $.style.insertRule(['p'], 'text-decoration:line-through;') $.style.insertRule(['div p'], 'text-decoration:none;color:blue')
第二个理由应该是清楚的，规则。 作为可选的第三个参数，可以提供上下文文档。
第一个参数是select器作为数组元素。
请注意，您不必使用由逗号分隔的不同select器，因为MSIE只接受“Single contextual selectors”作为addRule（）的参数
看看小提琴： http : //jsfiddle.net/doktormolle/ubDDd/
虽然不改变现有的样式元素，但它可以作为创build新样式的跨浏览器方式：
$( "<style>body { background: black; }</style>" ).appendTo( "head" )
通过级联，它将覆盖现有的样式，这应该做的伎俩。
jQuery总是在标签本身中添加它的CSS。
我想你应该使用append()函数和一个新的主体样式规则。
喜欢这个：
var newRule = "body{ /*your CSS rule here...*/ }"; $("style").append(newRule);
要么
$("body").css({ /*CSS rule...*/ });
我希望这是你的意思…
我能够通过添加它的HTML来修改该部分。
var styleText = $('style').html(); styleText += '\n' + '#TabName div ul li a {border-top-left-radius:5px;}'; $('style').html(styleText);
你可以改变你的身体类，但你不能改变你的风格标签：
HTML：
<style title="css_style" type="text/css"> .highlight { background-color:#ff0000; } </style>
JavaScript的：
$('body').toggleClass(".highlight");
也许把所有现有的规则复制到一个string，添加你的东西或修改里面的东西，删除现有的标签，并replace它修改它更容易，如下所示：
//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');
现有的答案都没有提到jqueryEl.text ，所以这里是：
$("<style/>").text(css).appendTo(document.head);
