jquery改变实际的css样式

Question

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

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

在下面的示例中(请参阅 fiddle )，您可以看到我有一个填充框，用户可以在其中输入新值。当他们这样做时，我的代码将覆盖 #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 减速。