1

私は次のスタイル定義を持っています。動的に変更できます。

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

私のフィドルを参照してください

4

3 に答える 3

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

デモ

于 2012-04-25T19:54:13.393 に答える
2

CSSメソッドを使用します。

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

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

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

于 2012-04-25T19:52:03.760 に答える
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 );
}); ​
于 2012-04-25T20:00:21.227 に答える