如何使用 javascript 切换 FF 中 div 的可见性？ （IE 和 Chrome 工作正常）

Question

所以，我尝试使用 javascript 切换 div 层的可见性，这就是它的样子：

document.all["layer1"].style.visibility='visible';

和

document.all["layer1"].style.visibility='hidden';

如果我尝试在 Firefox 中执行此操作，语法会是什么样子？如果我知道这一点，那么我将添加一个 if 语句来检查浏览器是否为 Firefox 并使用备用代码。

Answer 1

document.all

不是受支持的函数，也不在 DOM 规范中（Here 对此有更多介绍）。您必须通过其他方法来获取 div。

查询选择器

document.querySelector('div#layer1').style.visibility = 'hidden';    
document.querySelector('div#layer1').style.visibility = 'visible';

或

获取ElemenyById

document.getElementById('layer1').style.visibility = 'hidden';
document.getElementById('layer1').style.visibility = 'visible';

主要有两种方法。

Answer 2

不要使用

document.all[]

。并非所有浏览器都支持它，并且很大程度上是 IE4 时代的产物。而是使用

document.getElementById()

来访问

<div>

的 id 属性：

document.getElementById("layer1").style.visibility = 'hidden';
document.getElementById("layer1").style.visibility = 'visible';

Answer 3

您可以使用 querySelectorAll，但随后您需要循环遍历元素。

document.querySelectorAll('.layer').forEach((element) => {
  element.style.visibility='hidden';
});

https://jsfiddle.net/Haxen2000/xo8k0eqp/6/

Answer 4

//class named layer1
document.querySelectorAll('.layer1').style.display='none';
document.querySelectorAll('.layer1').style.display='block';

//id named layer1
document.querySelector('#layer1').style.display='none';
document.querySelector('#layer1').style.display='block';