jquery実際のCSSスタイルを変更する

Question

私は以下のスタイル定義を動的に変更することができます。次の例では

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

（フィドルを参照してください）私は、ユーザーが新しい値を入力することができますパディングボックスを持っていることがわかります。彼らが私のコードを実行すると、＃box_shipto_header {}の中のすべてを上書きし、単にパディング宣言だけを変更するのではありません。

jquery html（）メソッドを使用するとコンテンツが上書きされますが、私が必要とする他の方法はわかりません。

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

see my fiddle

Answer 1

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

Answer 2

使用CSS方式：

$(function() { 
    $('#padding').blur(function() { 
     $("#box_shipto_header").css("padding", $(this).val() + "px"); 
    }); 
}); 

参照：http://jsfiddle.net/matthewbj/5c5wX/

あなたはボックスに10と入力した場合

だから、そのようなid要素を更新する必要があります

EDIT CSSメソッドを使用すると、属性がCSSの減速度を変更する代わりに#box_shipto_headerに追加されます。

Answer 3

$(function(){ 
    $('#padding').blur(function(){ 
     $('#box_shipto_header').css('padding',$(this).val()+'px'); 
    }); 
}); 

DEMO