如何将javascript设置样式属性返回到CSS默认值

Question

我正在尝试弄清楚如何在使用javascript更改样式属性后,我可以恢复到样式表中的值(包括单位).

在下面的例子,我想的输出来读取100px(在CSS的值),而不是10px作为getComputedStyle给出.

我也保留虚拟div top:25px,因此移除style属性将无法正常工作.

我最好的是克隆节点并读取高度并存储在属性中(http://jsfiddle.net/daneastwell/zHMvh/4/),但这并不是真正得到浏览器的默认css值(特别是如果这是设置在ems).

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>

Answer 1

只需清除您希望回退到原始样式表的内联样式即可.

elem.style.left = null;

Answer 2

该样式对象有一个内置的removeProperty()方法,所以你可以这样做:

elem.style.removeProperty('left');

据我所知,这与设置属性具有完全相同的效果null,正如abaelter建议的那样.我只是觉得为了完整起见可能值得包括.