Javascript：切换div的可见性

我正在尝试使用java脚本使div可见/不可见。我有一个函数，如果div是可见的，则应该将可见性更改为“none”，如果div是none，则应该将可见性更改为“visible”。然而，它似乎不起作用。代码如下：

<script>
      function toggleTools()
      {
          var element = document.getElementById('divTools');
          if(element.style.visibility=='visible')
          {
              element.style.visibility='hidden';
          }
          else
          {
              element.style.visibility='visible';
          }
      }
</script>

函数切换工具（）
{
var元素=document.getElementById（'divTools'）；
if（element.style.visibility=='visible'）
{
element.style.visibility='hidden'；
}
其他的
{
element.style.visibility='visible'；
}
}

随大流

document.getElementById('divTools').style.display = 'block';
document.getElementById('divTools').style.display = 'none';

试着这样做：

<script>
      function toggleTools()
      {
          var element = document.getElementById('divTools');
          if(element.style.display!='none')
          {
              element.style.display='none';
          }
          else
          {
              element.style.display='block';
          }
      }
    </script>

---

我试过你的代码，它对我有用。请查找下面的代码。最初设置图元的可见性，否则它在开始时不起作用

 <script>
          function toggleTools()
          {
              var element = document.getElementById('divTools');
              if(element.style.visibility=='visible')
              {
                  element.style.visibility='hidden';
              }
              else
              {
                  element.style.visibility='visible';
              }

          }
        </script>

    <div id="divTools" style="visibility:visible">
    <p>Some Text</p>
    </div>
    <input type="button" onclick="toggleTools()" value="click" />

函数切换工具（）
{
var元素=document.getElementById（'divTools'）；
if（element.style.visibility=='visible'）
{
element.style.visibility='hidden'；
}
其他的
{
element.style.visibility='visible'；
}
}
一些文本

最后一件事不起作用，这是第一次谁给页面充电。我检查可见性==''是否有效

function toggleTools()
      {
          var element = document.getElementById('divTools');
          if(element.style.visibility=='visible' || element.style.visibility=='')
          {
              element.style.visibility='hidden';
          }
          else
          {
              element.style.visibility='visible';
          }
      }

现场演示：

---

享受您的代码。

如果您最初设置了可见性，则代码可以工作：

通过CSS：

#divTools {
    visibility:hidden;
}

或通过JavaScript：

document.getElementById('divTools').style.visibility='hidden';

---

使用jquery非常简单这怎么办不管用？这应该管用，请发布你的HTML。效果非常好->不管jquery是否可行，他都没有在这篇文章上贴标签，所以被接受的答案应该是原始Javascript。为什么他不能使用可见性？因为可见性在某些浏览器中有问题，jQuery总是使用display:block；和显示：无；据我所知，任何浏览器的可见性都没有问题？那会是什么浏览器？有什么问题吗？这就是问题所在，@durbnpoisn评论道：这是一个区别。如果设置display:none，它将隐藏整个元素，而visibility:hidden意味着元素的内容将不可见，但元素保持其原始位置和大小。为什么他不能使用visibility？这是不同的。如果您设置display:none，它将隐藏整个元素，而visibility:hidden意味着元素的内容将不可见，但元素将保持其原始位置和大小。因此，当visibility不起作用时，您认为设置其他CSS属性会起作用吗？他没有确切指定“不起作用”的含义。所以我的想法是，尝试不同的方法，得到不同的结果。我并不是唯一一个提出这样建议的人。我们可以从评论中看出它是有效的。然而，这并不是一个答案。他首先需要使用可见性。否则，最初它不起作用。你能取消你的否决票吗？否决票不是我的，朋友。也许有人刚刚同意我的观点，但你仍然认为这不是答案。我编辑了它，让我知道它是否需要删除。

document.getElementById('divTools').style.visibility='hidden';