jQuery CSS生成器 - 更新CSS輸出？

我正在玩jQuery，並認爲我會建立一個小小的CSS生成器。jQuery CSS生成器 - 更新CSS輸出？

當前您可以看到，當您進行更改時，它只是追加更改，我希望它在某種意義上更新了css輸出而不是添加到它。所以不是..

textarea{ 
font-size: 18px; 

}textarea{ 
color: green; 

}

這將是：

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

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

這是我迄今搖擺。

來源

2011-02-04 AJFMEDIA

這：`$（「＃code」）。append（element +「{
」）;`看起來非常錯誤。您正在將HTML添加到CSS樣式定義中。結果將會是'textarea {
color：green;}`哪一個永遠不會寫。刪除`
`。 – 2011-02-04 14:54:45

你目前正在做簡單的字符串連接。如果使用屬性/值對作爲樣式屬性/值創建表示樣式的對象，則您將有更容易的時間。然後你可以枚舉這些屬性，並生成一個字符串。這將使添加/更新/刪除樣式變得更容易。 – user113716 2011-02-04 15:03:14

修訂

只是一個概念證明，但你可以得到的想法......

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

來源

2011-02-04 15:21:22

jQuery CSS生成器 - 更新CSS輸出？

回答

相關問題