无法控制表'；在chrome下使用javascript提高可视性

我有一个显示卡片元素的UI，当点击时这些元素会展开

卡最初包含一个CSS显示值为“无”的表。 当用户单击该卡时，它会触发一个javascript函数，将表的显示值从“无”更改为“还原”，从而使表显示出来

这在Firefox中运行得很好，但由于某些原因，chrome忽略了更改表上显示值的代码

  function toggle_card(x) {
    var expandable = document.getElementById(x);

    console.log('expandable:', expandable.style.display);
    console.log('id:', expandable.id);

    if (expandable.style.display == "none")
    {
      console.log('Try Revert');
      expandable.style.display = "revert";
    } else {
      console.log('Try None');
      expandable.style.display = "none";
    }
    console.log('finally:', expandable.style.display);
  }

单击卡时，这是控制台输出，chrome显示：

expandable: none
clubhouse:634 id: tGLR.000B4002.0000D55C.0013.A387
clubhouse:637 Try Revert
clubhouse:643 finally: none

看起来该函数触发正确，标识当前元素ID和显示状态，但设置新的显示值无效。有什么想法吗？

样式

显示：还原

不是有效的样式。您可能正在寻找样式

display:initial

，以设置表格的原始样式

编辑：我不知道

显示

的

还原

值存在。对于跨浏览器支持，请检查。它具有针对每个功能的浏览器支持的最新列表

由于

revert

值不代表Chrome中的有效样式，因此未正确定义跨浏览器的行为。在我看来，Chrome仅仅通过不更改显示样式来解释样式的错误值

作为示范：

函数更改显示（）{
var foo=document.getElementById（'foo'）；
开关（foo.style.display）{
案例“无”：
log（“span had style==”+foo.style.display+“.”）；
foo.style.display='inline'；
打破
“内联”案例：
log（“span had style==”+foo.style.display+“.”）；
foo.style.display='无效'；
打破
案例“无效”：
log（“span had style==”+foo.style.display+“.”）；
foo.style.display='initial'；
打破
案例“首字母”：
log（“span had style==”+foo.style.display+“.”）；
foo.style.display='none'；
打破
违约：
log（“span had style==”+foo.style.display+“.”）；
foo.style.display='none'；
打破
}
}

更改显示



示例元素
Chrome不支持
revert
。我在FireFox中编辑CSS，不知道Chrome不支持“revert”值。我使用了“display:table”，非常感谢您的澄清。我编辑了我的答案，并添加了一个链接，在检查哪个浏览器支持什么时，这是一个有用的资源。