what's the correct way to remove/reset a css property via javascript? [duplicate]

Question

Possible Duplicate:
how to remove css property using javascript?

I have this javascript:

var div = document.getElementById('myDiv');
div.style.width = '300px';
div.style.height = '200px';
...

and so on...

Later on I am faced with the need of removing a property (not changing its value, really removing meaning: like I had not set that before)

I coded something like this:

1. div.style.height = undefined;
2. div.style.height = null;
3. div.style.height = '';

Only solution n.3 seems to work but even so... I am not sure this is the correct way to do it (I am only using chrome to test this)

Does anybody know what's the correct way ? which works across all proper browsers ?

Thanks

Answer 1

You can use inherit or initial value. http://www.w3.org/TR/css3-values/#common-keywords

Answer 2

There's no "correct way". Microsoft once invented style.removeAttribute(), but it's not supported. The best way is to set it to the standard-value.

Edit: As dystroy mentioned, setting it to "" resets it in all browsers, so that would be the best way.

Answer 3

Here you go:

div.style.height = "auto"