jQuery CSSジェネレータ - CSSの出力を更新しますか？

Question

私はjQueryを使いこなしていて、少しCSSを生成すると思っていました。

現在、変更を加えると変更が追加されることがわかります。追加するのではなく、CSS出力を更新するようにしたいと思います。その代わりに...

textarea{ 
font-size: 18px; 

}textarea{ 
color: green; 

} 

それは次のようになります。

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

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

これは私がこれまでに揺れているものです。 ...

Answer 1

は概念のちょうど証明

を更新しましたが、あなたのアイデアを得ることができ

• 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);