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.

I believe what you're asking for might be tricky. However you can probably add a new style tag at the end of the head tag with the set of new rules? — Jerska
– Jerska, Commented Jul 4, 2015 at 14:13
What is the difference between adding to inline and inline style block? I you add with javascript it will be more maintainable to add inline than a separate style tag. Best would of course be if you create all your classes in a separate css file(or even SASS/LESS) and add/remove classes and ids where you want to change your style. — Magnus Karlsson
– Magnus Karlsson, Commented Jul 4, 2015 at 14:21
@Magnus you are right. best way is to creating all classes in css and add\remove classes using JavaScript. — Gopal Joshi
– Gopal Joshi, Commented Jul 4, 2015 at 14:29
modifying stylesheets in code is definitely possible, but jQueery is (thankfully) not the answer - use this google search google.com.au/search?q=modify%20stylesheet%20in%20javascript and rejoice — Jaromanda X
– Jaromanda X, Commented Jul 4, 2015 at 14:34
@MagnusKarlsson yes I can do so. But lot of wast code is generating. I already said I am developing a code editor so user may get messed up will all the code. — Manohar Gunturu
– Manohar Gunturu, Commented Jul 4, 2015 at 15:08

Amin Jafari · Accepted Answer · 2015-07-04 15:14:41Z

2

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

answered Jul 4, 2015 at 15:14

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KAD Over a year ago

This is not totally functional, if we have an element with id #main_1 before #main in the text, the css will be added to it which is wrong.

KAD · Accepted Answer · 2015-07-04 14:30:39Z

1

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

answered Jul 4, 2015 at 14:30

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Comments

Confused · Accepted Answer · 2015-07-04 14:37:07Z

0

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

answered Jul 4, 2015 at 14:37

Confused

1,66215 silver badges27 bronze badges

Comments

Maheshvirus · Accepted Answer · 2015-07-04 14:54:19Z

0

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

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

answered Jul 4, 2015 at 14:54

Maheshvirus

7,6412 gold badges45 silver badges46 bronze badges

Collectives™ on Stack Overflow

Update CSS Rule in style sheet

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related