Dynamically check box style needs to be changed.

I want check box top value to be changed dynamically, but it fails the top value sets the original position when the checkbox is checked or unchecked.

Code :

var inclusive_chk;
        var top=10;

        function delete_option ( )
        {
                obj = document.getElementById(inclusive_chk.getId());
                obj.style.top = 30;
        }

        inclusive_chk= new AW.UI.Checkbox;
        inclusive_chk.setId('inclusive_chk')
        inclusive_chk.setStyle ('left', '252px' );
        inclusive_chk.setStyle ('top', top );
        inclusive_chk.setStyle ('width', '75px' );
        inclusive_chk.setStyle ('height', '20px' );
        inclusive_chk.setStyle ('color', 'navy' );
        inclusive_chk.setStyle ('overflow', 'hidden' );
        inclusive_chk.setStyle ('position', 'absolute' );
        document.write(inclusive_chk.toString());

        var delete_btn;
        delete_btn = new AW.UI.Button;
        delete_btn.setId ('delete_0');
        delete_btn.setControlText ('Delete');
        delete_btn.setStyle ('left', '420px' );
        delete_btn.setStyle ('top', top );
        delete_btn.setStyle ('height', '20px' );
        delete_btn.setStyle ('width', '48px' );
        delete_btn.setEvent ( 'onclick', function () { delete_option( ); }  );
        delete_btn.setAttribute( 'title', 'Click to delete this option' );
        delete_btn.setStyle ('position', 'absolute' );
        document.write(delete_btn.toString());

Kindly suggest some solutions,
Thanks in advance.

You should use

var top = '10px';

Sir,
I have done the changes as you said but still the problem persists.

Code Changed :

var top='10px';
...
obj.style.top = '30px';

Thanks in advance.

Awaiting for some suggestions.

If you assign the style directly to the DOM element - it will be overwritten on refresh. You should assign the styles to the AW object -

function delete_option ( )
{
    inclusive_chk.setStyle ('top', '30px');
}

hearty thanx, the issue got solved.