Javascript 更新样式表中的CSS规则 让我们考虑HTML页面中的样式表，如下图 #main { display: block; width: 500px; } #content { border: 1px solid #ccc; } $('#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>

现在我遇到了一种情况，我必须更新

#main

的CSS规则，这意味着我必须添加一些CSS属性，如颜色、背景等

因此，我的html页面中的样式表应更新如下所示：

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

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

我可以使用jQueryCSS添加css规则，如下所示

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

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

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

$（'main'）.css（'background'，'blue'）；
//但这并不是在其中添加#main
//上述jquery代码的输出为：
//  

我需要的是将css属性添加到样式表中的规则中（即，#main in

）

---

我正在开发一个代码编辑器，这就是我面临这样一个问题的原因。

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

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

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

var newCss=“#main{
显示：块；
宽度：500px；
颜色：#333；
背景：#fff；
}   
#内容{
边框：1px实心#ccc；
}  ";
$（“标题”）。追加（新CSS）；

试试这个

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

---

这是假设您在页面中只有一个

标记，您可以将核心css应用于特定分区…如下所示

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

---

我花了很长时间，但最后我们走了：

如果我们单击

#main

元素，

样式

标记将使用我们刚刚定义的函数进行更改，因此如果我们在函数之前获得

脚本

标记的文本，它将：

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

---

我相信你的要求可能很棘手。但是，您可能可以使用一组新规则在

head

标记的末尾添加一个新的样式标记？添加到内联和内联样式块之间有什么区别？如果您使用javascript添加，那么添加内联比单独的样式标记更易于维护。当然，最好是在一个单独的css文件（甚至SASS/LESS）中创建所有类，并在需要更改样式的位置添加/删除类和ID。@Magnus你说得对。最好的方法是在css中创建所有类，并使用JavaScript添加\删除类。在代码中修改样式表绝对是可能的，但jQueery（谢天谢地）不是答案——使用这个google搜索和rejoice@MagnusKarlsson是的，我可以。但是大量的wast代码正在生成。我已经说过我正在开发一个代码编辑器，这样用户可能会把所有的代码都搞乱。这不是完全有效的，如果我们在文本中有一个id为#main#1 before#main的元素，css将被添加到其中，这是错误的。