jQuery, изменяющий фактический стиль css

Question

У меня есть следующее определение стиля, которое может быть динамически изменено.

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

В следующем примере (см скрипки), вы можете увидеть, что у меня есть коробка обивки, где пользователь может ввести новое значение. Когда они меняют, код будет перезаписывать все внутри #box_shipto_header {}, а не просто изменять только декларацию заполнения.

Я понимаю, что использование метода jquery html() будет перезаписывать контент, но я не знаю других методов, чтобы делать то, что мне нужно.

Так что, если вы вводите 10 в поле он должен обновить идентификатор элемента так:

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

EDIT Использование метода CSS добавит атрибут style к #box_shipto_header вместо изменения его замедления CSS.

Answer 3

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

DEMO