CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Manohar Gunturu
Manohar Gunturu

Reputation: 696

Update CSS Rule in style sheet

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.

Upvotes: 8

Views: 320

Answers (4)

Amin Jafari
Amin Jafari

Reputation: 7207

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;');
});

Upvotes: 2

Maheshvirus
Maheshvirus

Reputation: 7523

You can apply hardcore css to perticular div...Like this

    $('#main').css("background":"blue");

Upvotes: 0

Confused
Confused

Reputation: 1662

Try this

  var style="#main{display: block;
  width: 500px;
  color: #333;
  background: #fff;"};
  $('style').append(style);

This is assumed that you have only one <style> tag in page

Upvotes: 0

KAD
KAD

Reputation: 11102

I think you cannot explicitly catch css rules inside the current style, but as a work around you can append another style to the head with the new rules, it will override the existing rules as follows :

var newCss = "<style>#main{
                         display:block;
                         width:500px;
                         color: #333;
                         background:#fff;
                          }   
                        #content{
                        border:1px solid #ccc;
                       }  </style>";

$("head").append(newCss);

Upvotes: 1

Related Questions