jQuery CSS - Write into the <style>-tag
I want to change开发者_运维问答 the background-color of the body of my HTML document. My problem is that jQuery adds the style to the body tag, but I want to change the value in the style tag. Is this possible using 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
$('body').css('background-color','#ff0000');
Result
<body style="background-color:#ff0000;">
// ....
</body>
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.
The are specific methods for manipulating stylesheets,
DOM: insertRule()
Microsoft: addRule()
I just made a method for jQuery(maybe somebody else already did, I don't know)
(
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()
Check out the fiddle: http://jsfiddle.net/doktormolle/ubDDd/
jQuery always adds its CSS in the tag itself.
I think you should use the append() function with a new body style rule.
Like this:
var newRule = "body{ /*your CSS rule here...*/ }";
$("style").append(newRule);
or
$("body").css({ /*CSS rule...*/ });
I hope this is what you meant...
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');
I was able to modify the section by adding to it's html.
var styleText = $('style').html();
styleText += '\n' + '#TabName div ul li a {border-top-left-radius:5px;}';
$('style').html(styleText);
As commented above, jqueryEl.text should also work:
$("<style/>").text(css).appendTo(document.head);
You can change your body class but you cannot change your style tag:
HTML:
<style title="css_style" type="text/css">
.highlight
{
background-color:#ff0000;
}
</style>
JavaScript:
$('body').toggleClass(".highlight");
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.
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
加载中,请稍侯......
精彩评论