在样式表中更新CSS规则

Question

让我们考虑一下html页面中有一个样式表,如下所示

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

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

现在我有一种情况,我必须更新CSS规则的#main含义,我必须添加一些CSS属性,如颜色,背景等.

所以我的html页面中的样式表应该更新如下所示:

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

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

我可以使用jQuery css添加CSS规则,如下所示

$('#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>  

我需要的是它将css属性添加到样式表中的规则(即#main in <style></style>)

我正在开发代码编辑器,这就是我遇到这样一个问题的原因.

Answer 1

我认为您无法显式捕获当前样式中的 css 规则，但作为解决方案，您可以使用新规则将另一个样式附加到头部，它将覆盖现有规则，如下所示：

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

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