Update CSS Rule in style sheet

Question

Let's consider there is a style sheet in an html page as shown below

#main {
    display: block;
    width: 500px;
}

#content {
    border: 1px solid #ccc;
}  

now I have a situation where I have to update the CSS rule of #main meaning I have to add some css attributes like color, background etc.

So the Style sheet in my html page should be updated like shown below:

#main {
    display: block;
    width: 500px;
    color: #333;
    background: #fff;
}   

#content {
    border: 1px solid #ccc;
}  

I can use jQuery css to add CSS rules as shown below

$('#main').css('background','blue');

//but this is not adding #main in <style></style>
//output of above jquery code is: 
//<div id='main' style="background: blue"></div>  

What I need is for it to add css attributes to a rule in the style sheet (i.e., #main in <style></style>)

I am developing a code editor which is why I face such a problem.

Answer 1

it took me a long time but finally here we go: DEMO

if we click on the #main element the style tag will get changed using the function that we just defined, so if we get the text of the script tag before the function it will be:

<style>#main {
      display: block;
      width: 500px;
      height:200px;
      background-color:#000;
  }

  #content {
      border: 1px solid #ccc;
  }
</style>

and then after the function is called it will be:

<style>#main {
      display: block;
      width: 500px;
      height:200px;
      background-color:#000;
      color:#FFF;
  }

  #content {
      border: 1px solid #ccc;
  }
</style>

The Function:

//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element

function addCSSToStyleTag(styleElem,elemToChange,cssRule){
  var oldStyle=styleElem.text(),
      theElement=elemToChange,
      position=oldStyle.indexOf(theElement),
      cssToBeAdded=cssRule,
      closingBracketIndex=oldStyle.indexOf('}',position)-1,
      newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
  styleElem.text(newStyle);
};
$('#main').one('click',function(){
  addCSSToStyleTag($('style'),'#main','color:#FFF;');
});