Hi everyone,

My issue is pretty simple but tricky I guess. I dynamically set some style attributes to an element which were to read such attributes from a css class. Then When I clear these attributes by setting them to empty string I expect my element to reapply class attributes but it fails with some style attributes. My sample code is as follows, all attributes work fine and are restored correctly except for the "border" attribute. The border just disappears. what should I do generally in such situations?

.testClass{
    background-color:blue;
    width:200px;
    height:300px;
    position:absolute;
    top:10px;
    left:100px;
    border:solid red 1px;
}
.
.
.
<div class='testClass'>
    <button onclick='change(this.parentNode);'>
             Change Style
        </button>
    <button onclick='restore(this.parentNode);'>
             Restore Style
        </button>
</div>
.
.
.
<script language="javascript">
    function change(obj){
        obj.style.width="400px";
        obj.style.height="400px";
        obj.style.border="solid black 2px";
        obj.style.backgroundColor="white";
    }
    function restore(obj){
        obj.style.width="";
        obj.style.height="";
        obj.style.border="";
        obj.style.backgroundColor="";
    }
</script>



Best Regards,
Nerssi

I would have thought that you needed to reset the className attribute in the reset, maybe set to blank first, rather than simply assign empty values to the individual style attributes.

--

Joe (Microsoft MVP - XML)

How do I set border style to blank instead of assigning empty value?

You should be able to do obj.style.borderStyle = 'none';

Shawn Steward
Web Developer
www.shawnsteward.com

The sample code is right up there. You can test and see that by setting the border to 'none' the border style would not be restored to its relevant class attributes (solid red 1px), while other attributes would...