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

Question

我想做的事情：

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

我为什么要这么做：

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

我尝试过的：

用JS函数生成的CSS替换整个<style>标记。这是可行的，但似乎需要对一个非常小的更改进行大量处理。

此外，我还可以创建包含特定CSS类的容器<div>，并简单地查找/替换它们的HTML。以下示例：

  <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

更新的

Answer 2

您可以使用以下方式使用j-query

$("#button_background").css("color",'blue')

Answer 3

虽然可以做到这一点，但有更简单的方法可以做到(请检查此处和此处(，例如：使用类选择器，您可以筛选所有具有"旧"类$( ".oldClass" )的对象，并操作它们所具有的类(而不是编辑类(：

过滤并添加新类别

$( ".oldClass" ).addClass(".newClass")

并删除旧类

$( ".oldClass" ).removeClass(".oldClass")

您也可以使用.css来更改属性：

$( ".oldClass" ).css("background","#ff0000")