javascript and css

[mrdhood]

I've tried searching and I'm not sure if this is even possible due to the lack of (good) results.

 

I'm trying to make it so that when you click a button the actual stylesheet changes. I want for example:

 

<style>h1{ color: #aa000; }</style>
<h1>Test</h1>

 

would obviously make h1 have a font color of aa0000. Well I'm trying to make a button that changes that one to 00aa00 instead which is not a problem. Very easy actually especially since I use jquery. However I also create new h1 elements through ajax and those ones use the original aa0000 color because of the stylesheet. I want to know how to make new elements have the new color also.

[seanlim]

i think it is possible to change the entire stylesheet i.e. using $("link[rel=stylesheet]").attr('href', 'newstyleshee');

[mrdhood]

$('head').append('<style>h1{ color: #000; }</style>');  Worked.

 

This isn't really how I wanted to do it but I found that I don't think it's possible.

[Adam]

No, you can't modify the contents of the stylesheet. JavaScript can only modify the DOM - Document Object Model. Every element that makes up a web page, has a corresponding object within a parent 'document' object. So when you modify the color of an element, you only change that specific object within the DOM. What you should do is cater for such changes within your stylesheets, by creating separate classes for the elements. So when you click the button, you modify the element's class name, not it's individual properties. Any further elements you create you should associate with the new classes.