Question

I have the following style definition thant can be dynamically changed.

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

In the following example (see fiddle) you can see that I have a padding box where a user can enter a new value. When they do my code will overwrite everything inside the #box_shipto_header{} and not simply changing only the padding declaration.

I understand that using the jquery html() method will overwrite the content but I don’t know of other methods to do what I need.

So if you enter 10 in the box it should update the id element like that:

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