How to return a javascript set style property to CSS default

css, dom, javascript

Solution

Just clear the inline style you wish to fallback to original stylesheet on.

elem.style.left = null;

Problem

I'm trying to work out how, after changing style properties with javascript, I can revert to the value in the stylesheet (including the units). In the example below, I'd like the output to read `100px` (the value in the CSS), rather than `10px`, as `getComputedStyle` gives. I'd also keep the dummy div at `top:25px`, so removing the `style` property won't work. The best I have is cloning the node and reading the height and storing in a property (http://jsfiddle.net/daneastwell/zHMvh/4/), but this is not really getting the browser's default css value (especially if this is set in `em`s). http://jsfiddle.net/daneastwell/zHMvh/1/ ``` <style> #elem-container{ position: absolute; left: 100px; top: 200px; height: 100px; } </style> <div id="elem-container">dummy</div> <div id="output"></div> <script> function getTheStyle(){ var elem = document.getElementById("elem-container"); elem.style.left = "10px"; elem.style.top = "25px"; var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("left"); document.getElementById("output").innerHTML = theCSSprop; } getTheStyle(); </script> ```

Original source