javascript - 使用 jQuery/javascript 在 <style> 标签中添加/修改 CSS

Question

我想做什么:

我想在 <style> 中添加规则和修改现有规则用 javascript/jQuery 标记。

我为什么要这样做:

我基本上是在构建一个配色方案编辑器，当用户更改表单中的值时，我想更新 CSS 以反射(reflect)此更改。

我尝试过的:

替换整个 <style>带有由 JS 函数生成的 CSS 的标签。这行得通，但似乎需要进行大量处理才能进行非常小的更改。

我还可以创建容器 <div>包含特定 CSS 类并简单地查找/替换其 HTML 的 s。下面的例子:

  <div id="button_background_cont">
    <style type="text/css">.buttons {background-color:#333333;}</style>
  </div>

  <div id="button_color_cont">
    <style type="text/css">.buttons {color:#ffffff;}</style>
  </div>

这两种方法都有效……但真的很笨重，我不是特别喜欢它们。

我需要做的事的例子:

<style type="text/css" id="color_scheme">
   .buttons {background:#333333; color:#ffffff;}
</style>
<input name="button_background" id="button_background" value="#333333" />
<input name="button_color" id="button_color" value="#ffffff" />

更改表单元素并使其成为以下内容

<style type="text/css" id="color_scheme">
   .buttons {background:#ff0000; color:#333333;}
</style>
<input name="button_background" id="button_background" value="#ff0000" />
<input name="button_color" id="button_color" value="#333333" />

有什么想法吗？

Answer 1

这是一种基本的方法，您也许可以找到更好的方法来生成样式字符串，但它看起来像这样:

    function generateStylesContent(){
        var btnBgr = $("#button_background").val();
        var btnColor = $("#button_color").val();
        var stylesPlaceholder = ".buttons{background:[BACKGROUND];color:[COLOR];}";

        var newGeneratedStyles = stylesPlaceholder
                                 .replace("[BACKGROUND]", btnBgr)
                                 .replace("[COLOR]", btnColor)    

        $('#color_scheme').text(newGeneratedStyles);
    };

    $('.buttons').on('click', function(){
        generateStylesContent();    
    })

JSFIDDLE

已更新