更改元素显示无返回默认样式值JS

Question

我在JS中有一个隐藏解析元素的函数:

function hide(id){
  document.getElementById(id).style.display = "none";
}

如何创建将元素恢复为默认样式值的函数.例如,div display属性"block"与图像相同"inline-block",其他元素是"inline"或列表是"list-item"如何将它们恢复为默认状态？

function show(id){
  document.getElementById(id).style.display = "?????";
}

我知道如何在Jquery中做到这一点,但它不是一个选项.

在CSS中,可能存在元素的样式,包括style:none需要覆盖到默认值的样式.

由于我的示例中有CSS style.display = ''取消了JS添加的样式,但又回到了CSS中添加的任何样式,我想在使用CSS分配样式之前将其恢复为默认值.

我试过这个,因为它在其中一条评论的链接中提出:

elem = document.getElementById(id);
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");

但在这种情况下,当我期待时,'theCSSprop'返回"none"adiv"block"

有任何想法吗？谢谢.

Answer 1

您只需将其指定为空值:

document.getElementById(id).style.display = "";

或使用removeProperty方法:

document.getElementById(id).style.removeProperty( 'display' );

但请注意,这removeProperty将无法解决IE<9.

如果你想获得原始的CSS值,你可能需要从空<iframe>元素中获取它.我创建实例上的jsfiddle怎样用电流值getComputedStyle上的jsfiddle和iframe值.

请注意,getComputedStyle不支持旧版本的IE.它支持IE9 +.

对于IE8,你应该使用 Element.currentStyle