Générateur CSS jQuery- Mettre à jour la sortie CSS?

Question

Je joue avec jQuery et j'ai pensé que je pourrais construire un petit générateur de CSS.

Actuellement, vous pouvez voir que lorsque vous faites un changement, il ne fait qu'ajouter le changement, je voudrais qu'il mette à jour la sortie css au lieu de l'ajouter. donc au lieu de ..

textarea{ 
font-size: 18px; 

}textarea{ 
color: green; 

} 

ce serait:

textarea{ 
font-size: 18px; 
color: green; 
} 

http://jsfiddle.net/MSSJQ/3/

C'est ce que je bascule jusqu'à présent.

Answer 1

MISE À JOUR

juste une preuve de concept, mais vous pouvez avoir l'idée ...

• DEMO:http://so.devilmaycode.it/jquery-css-generator-update-css-output

$(function() { 
    $('#textarea').updateStyle(); 
}); 

(function($){ 
$.fn.updateStyle = function(options) { 
    var defaults = { 
     controls: '#controls p a', 
     codewrapper: '#code' 
    }; 
    var options = $.extend(defaults, options); 
    return this.each(function() { 
     $elm = $(this); 
     var element = $elm.attr('type'); 
     $(options.controls).click(function(e) { 
      e.preventDefault(); 
      var control_class = $(this).attr("class"); 
      var property_value = $(this).text(); 
      var css_property = control_class + ': ' + property_value + '; '; 
      var property_wrapper = '.' + control_class; 
      var html = '<span class="' + control_class + '">' + css_property + '<span>'; 
      var $outer = $('#' + element + '-outer'); 
      var $inner = $('#' + element + '-inner'); 
      if ($outer.length) { 
       if ($outer.find(property_wrapper).length) { 
        $outer.find(property_wrapper).html(css_property); 
       } else { 
        $inner.append(html); 
       } 
      } else { 
       $(options.codewrapper).append('<div id="' + element + '-outer">' + 
        element + ' {' + '<div id="' + element + '-inner">' + html + 
        '</div> }</div>'); 
      } 
      $elm.attr('style', $inner.text()); 
     }); 
    }); 
}; 
})(jQuery);