集內聯CSS餅乾，檢索，而不需要重寫整個內嵌CSS

Question

考慮我的實際代碼： `

var ck_color = $.cookie('color_cookie'); 

    var new_css = ".wrap{ \ 
    color: " + ck_color + "; \ 
    } \ 
    "; 
    $('body').append('<style id="inline_css" type="text/css">' + new_css + '</style>'); 


    $('.box-color').each(function() { 
     $(this).on('click', function() { 
      $('.box_color').removeClass('active'); 
      $(this).addClass('active'); 

      var ck_color = $(this).data('color'); 
      $.cookie('color_cookie', ck_color, { path: '/' }); 
      if ($("#inline_css").length > 0) { 
       $("#inline_css").remove(); 
      } 

      var new_css = ".wrap{ \ 
      color: " + ck_color + "; \ 
      } \ 
      "; 
      $('body').append('<style id="inline_css" type="text/css">' + new_css + '</style>'); 
     }); 
    });` 

我的問題是，如果內聯CSS長到多條線路的話，我每次都加倍，一次用於點擊事件上的設置cookie，並在代碼中的早期再次爲檢索cookie部分重寫它。 有沒有辦法用類似的方法只寫一次？任何更好的方式將不勝感激。

Answer 1

var sElement = $('<style id="inline_css" type="text/css"></style>'); 
$('body').append(sElement); 

function updateCSS(color) { 
    var new_css = ".wrap{ color: " + color + ";}"; 
    sElement.html(new_css); 
} 

現在，您應該隨時根據需要調用函數「updateCSS（）」來更新樣式元素。