将css代码附加到<style> </style>

Question

我正在尝试将css代码附加到<style>。

我已经<style> id <style id="custom-css">，我想点击按钮时添加更多样式。

$('.btn').click(function(){
    $('.class{background:#aaa;}').appendTo('custom-css');
});

Answer 1

不确定为什么你需要这样做，因为看起来你可以通过提前设置规则以及添加和删除另一个类来打开和关闭它来实现相同的结果但是：

$('#custom-css').append('.class{background:#aaa;}');

更好的方法是提前设定规则：

<style>
.class {background:none;}
.class.toggleOn {background:#aaa;}


</style>

然后是一些像

这样的脚本

$('.class').someEvent(function(){
    $(this).toggleClass('toggleOn');
});

Answer 2

可以这样做：

$('#custom-css').html(function (i, m) {
    return m+'.class{background:#aaa;}';
});

HTML：

<style id="custom-css">
    .class-1{background:#aaa;}
</style>
<div class="class-1">HDUYD7DY</div>
<div class="class">F8HR</div>

演示：http://jsfiddle.net/grr7j/

但是，我建议不要使用此方法，而是使用：

$('.class').css('background', '#aaa');

不知道风格是什么，推荐一个真正的替代品有点困难。