添加/修改CSS中的CSS <style> tag on with jQuery/javascript

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