在样式表中更新CSS规则

时间:2015-07-04 14:08:39

标签: javascript jquery html css

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

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

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

现在我有一种情况需要更新#main的CSS规则,这意味着我必须添加一些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属性添加到样式表中的规则(即<style></style>中的#main)

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

4 个答案:

答案 0 :(得分:2)

我花了很长时间,但最后我们走了: this thread

如果我们点击#main元素,style标记将使用我们刚刚定义的函数进行更改,那么如果我们在函数之前获得script标记的文本将是:

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

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

然后在调用函数之后它将是:

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

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

功能:

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

答案 1 :(得分:1)

我认为你无法在当前样式中明确地捕获css规则,但是作为一种解决方法,你可以使用新规则将另一种样式添加到头部,它将覆盖现有规则,如下所示:

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

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

答案 2 :(得分:0)

试试这个

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

假设您在页面

中只有一个<style>标记

答案 3 :(得分:0)

您可以将硬核css应用于特定div ...就像这样

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