title: Changing (global) CSS styles from Javascript
body: <p>related question with unsatisfactory answers: <a href="https://stackoverflow.com/questions/566203/changing-css-values-with-javascript">Changing CSS Values with Javascript</a></p>
  
  <p>Here's what I want to do. I'd like to be able to set a page element's class to some value, and have the browser animate it, for instance a table td whose background will be set to <code>rgb(255*(cos(time)*.5+.5),0,0)</code>. </p>
  
  <p>I can easily do this for a single element by setting a timer. But I might want to have multiple elements have this property, and having to keep track of a timer for each one isn't a great idea. </p>
  
  <p>So what I'd like to do is to be able to change a CSS value from javascript. </p>
  
  <p>I am looking at the code <a href="http://www.shawnolson.net/scripts/public_smo_scripts.js" rel="nofollow noreferrer">here</a> and it strikes me as being a bit too heavy-handed for me to use from a timer. From the looks of it, each call I make to a function like <code>changecss</code> has me appending an entire css rule to every single stylesheet. This is going to majorly pollute the stylesheets internally and will probably result in a runaway memory leak if I call it in a loop every 33ms. </p>
  
  <p>So I'm looking for a solution that will let me zero in on the rgb color setting within the css entry corresponding to a particular class. And modify it. I don't actually need to retrieve the original setting in this case. Can this be done? I'd like to support IE9 if possible, though IE 6,7,8 already screws up my project so much that I've given up on them.</p>