Question

我有一个UI，其中显示了单击时会展开的卡片元素。

卡最初包含一个CSS显示值为“ none”的表。当用户单击卡片时，它将触发一个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);
  }

点击卡片时，控制台输出镶边显示如下：

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

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

Answer 1

~~样式display: revert无效。您可能正在寻找样式display: initial来设置表格的原始样式~~

编辑：我不知道revert的{{1}}值是否存在。对于跨浏览器支持，检查https://caniuse.com/#search=revert可能很有用。其中包含了每个功能的最新浏览器支持。

由于display值不能代表Chrome中的有效样式，因此无法正确定义浏览器之间的行为。在我看来，Chrome只是通过不更改显示样式来解释该样式的错误值。

作为演示：

revert

function changeDisplay() {
  var foo = document.getElementById('foo');
  switch (foo.style.display) {
    case 'none':
      console.log("The span had style == '" + foo.style.display + "'.");
      foo.style.display = 'inline';
      break;
    case 'inline':
      console.log("The span had style == '" + foo.style.display + "'.");
      foo.style.display = 'invalid';
      break;
    case 'invalid':
      console.log("The span had style == '" + foo.style.display + "'.");
      foo.style.display = 'initial';
      break;
    case 'initial':
      console.log("The span had style == '" + foo.style.display + "'.");
      foo.style.display = 'none';
      break;
    default:
      console.log("The span had style == '" + foo.style.display + "'.");
      foo.style.display = 'none';
      break;
  }
}

除此之外，我无济于事，因为您没有提供任何有效的示例。如果这样做没有帮助，请也包括HTML代码，这样我就可以查看出了什么问题。

chrome下无法使用javascript控制表格的可见性

1 个答案: