How to undo styles applied to form elements using Javascript?

[littlegiant]

I've created a Javascript form element code generator and I have it configured so that the user can apply border styles to some form elements (textarea, input type=button). I also have a live preview of the form elements which shows which styles have been applied.

Now I'm trying to create an option to undo those border styles and have it show in the live preview and I can't figure out how to do this.

For example, if I'm using-

document.getElementById("textarea_ID").style.borderWidth = 1 + "px";
document.getElementById("textarea_ID").style.borderStyle = "solid";

...in my Javascript code to apply the border styles, how do I get it so that the textarea element in the live preview returns to the default OS widget form style? In other words, how do you completely remove border styles you've applied to form elements using Javascript?

Sorry about forgetting the correct terminology for that but what I mean to say is Windows has its own default style it applies to textarea elements (and submit buttons) if they're not styled by CSS. How can I use Javascript to return to that style? The only thing I can think of so far is to reload the page (which is not a very graceful solution).

Any feedback would be appreciated. Thanks.

[Bernard Marx]

This kind of thing usually works

document.getElementById("textarea_ID").style.borderStyle = "";

In this case, any stylesheet rules are "unshadowed". So, if there is no applicable styling in a stylesheet, the browser default returns. The browser's styling could be seen as the "first stylesheet" (I think it actually is in some browsers)

[Bernard Marx]

Oh yes. If you want to remove ALL inline styling, try this:

elementRef.style.cssText = "";

[littlegiant]

Excellent! Thank you very much, Bernard! (D'oh! Why didn't I think of that?...)