javascript - 在 CSS 中使用 Javascript 变量来控制对象的可见性

Question

我使用 Javascript 制作了一个表格，并将该表格存储在一个我可以在 CSS 中引用的变量中。在 CSS 中，我想通过引用表格的 Javascript 变量来隐藏表格。这听起来非常令人困惑......这就是我的意思:

这是表 1 的代码:

grid1=display_array(array1);

display_array 函数在 javascript 中创建一个表格，并自动将其显示到 HTML 中。

30 秒后，我想隐藏网格 1 并显示网格 2。所以我假设我必须对计时器使用以下语法:

setTimeout(function(){grid2=display_array(array2);//Which automatically shows the grid2
                      //syntax for hiding grid1
                      },30000);

我是否需要使用 CSS 隐藏表格并在 CSS 中引用其 Javascript 变量？如果是这样，我该怎么做？

或者作为替代方案，我可以只使用 Javascipt 来控制表格的可见性吗？

非常感谢。

Answer 1

您可以在 javascript 间隔中执行此操作

如果你的表有一个 ID“tbl1” 表二带有“tbl2 ”

function onload() 
{
  setTimeout(function() 
  {
    table_one = document.getElementById("tbl1");
    table_two = document.getElementById("tbl2");

    if(table_one.style.display == "none")
    {
       table_one.style.display = "block";
       table_two.style.display = "none";
    }
    else
    {
       table_one.style.display = "none";
       table_two.style.display = "block";
    }
  }, 3000); //Seconds you want to set for this
}

默认设置一张表display=none。