Menu
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> 
235
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section.
Conclusion. You can change CSS using the jQuery css() method which is used for the purpose of getting or setting style properties of an element. Using this method you can apply multiple styles to an HTML all at once by manipulating CSS style properties.
jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. When used to return properties: This method returns the specified CSS property value of the FIRST matched element.
The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.
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.
114
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/
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
