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>

see my fiddle

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

DEMO

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

jquery改变了实际的css风格

3 个答案: