jquery - jQuery的改变实际的CSS样式

我有以下样式定义，thant可以动态更改。

<style id="templateCSS">
    #box_shipto_header{
        background-color: black;
        color: white;
        padding:5px;
        }
</style>

在下面的示例（请参阅小提琴）中，您可以看到我有一个填充框，用户可以在其中输入新值。完成这些操作后，我的代码将覆盖#box_shipto_header {}中的所有内容，而不仅仅是更改填充声明。

我知道使用jquery html（）方法将覆盖内容，但是我不知道其他方法可以满足我的需要。

因此，如果您在框中输入10，则应该更新id元素，如下所示：

<style id="templateCSS">
    #box_shipto_header{
        background-color: black;
        color: white;
        padding:10px;
        }
</style>

see my fiddle

最佳答案

jsFiddle（http://jsfiddle.net/7V4TU/21/）

$('#padding').blur( function()
{
    var currentCSS = $("#templateCSS").html();

    var beforePadding = currentCSS.substring( 0 ,  currentCSS.indexOf( "padding:" ) + 8 );
    var afterPadding = currentCSS.substring( currentCSS.indexOf( "padding:" ) + 8 );
    var removePadding = afterPadding.substring( afterPadding.indexOf( "px" ) + 2 );

    $("#templateCSS").html( beforePadding + $(this).val() + "px" + removePadding );
}); ​