Javascript 切换div的可见性属性

我在一个div中有一个HTML5视频。然后我有一个自定义的播放按钮-效果很好。
我将视频的可见性设置为加载时隐藏，单击播放按钮时可见，如何在再次单击播放按钮时将其恢复为隐藏

函数showVid（）{
document.getElementById（'video-over'）。style.visibility='visible'；
}

#视频结束{
可见性：隐藏；
背景色：rgba（0,0,0,7）
}

使用jQuery：

$('#play-pause').click(function(){
  if ( $('#video-over').css('visibility') == 'hidden' )
    $('#video-over').css('visibility','visible');
  else
    $('#video-over').css('visibility','hidden');
});

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');

---

根据jQuery文档，不带参数调用

toggle（）

将切换可见性

$('#play-pause').click(function(){
   $('#video-over').toggle();
});

---

还有另一种方法可以通过JavaScript实现。您所要做的就是根据CSS中DIV可见性的当前状态切换可见性

例如：

function toggleVideo() {
     var e = document.getElementById('video-over');

     if(e.style.visibility == 'visible') {
          e.style.visibility = 'hidden';
     } else if(e.style.visibility == 'hidden') {
          e.style.visibility = 'visible';
     }
}

---

要稍微清理一下并维护一行代码（就像使用

toggle（）

），您可以使用，这样您的代码看起来就像这样（也可以使用jQuery）：

---

要使用类似于$.fadeIn（）和$.fadeOut（）的效果，可以使用转换

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

---

最好像这样检查可见性：

---

如果（$（“#视频结束”）。是（“：可见”）

谢谢。。。我浪费了半个小时的生命。我的头自动转到“onclick”，因为我在用一个按钮工作。我真的很感激@TB11您可以使用

onclick

。只需将切换逻辑放入

showVid（）函数中即可。那么，它将是一个
toggleVid（）
函数。$（'video over'）.css（'visibility'，$（'video over'）.css（'visibility'）=='hidden'？'visible'：'hidden'）；只是为了将来参考，可见性和显示工作方式有所不同。显示按层次结构应用于内部div，而可见性在某些情况下不适用。这里的显示也是一样：
$（'ivideo over'）.css（'display'，$（'ivideo over'）.css（'display'）='none'？'block'：'none'）注意css属性“可见性”和“显示”之间的差异toggle（）'更改“display”属性，该属性将隐藏元素，并使空间“可用”给其他元素，而在“可见性”下，元素将继续占用空间。正如OP在最后一句中所说的，这就是为什么“toggle（）”在这里不起作用的原因，“根据jquery文档，调用toggle（）而不使用参数将切换可见性。”不，它不起作用。可见性和显示是两件不同的事情，切换在显示上有效，而不是可见性。如果要操作服务器端内容
display:none
不是选项，则切换（）将不起作用