jquery - jquery改变实际的css样式

Question

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

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

看我的小提琴

Answer 1

使用 CSS 方法：

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

见：http: //jsfiddle.net/matthewbj/5c5wX/

编辑使用 CSS 方法将style属性添加到#box_shipto_header而不是更改它的 CSS 减速。

Answer 2

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

演示

Answer 3

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