两种方式
有两种常用的方法可以使用javascript动态更改元素的可见性。。。
通过修改其style:
// occupies same space when hidden
elem.style.visibility = 'hidden' // 'visible' to unhide
// does not occupy any space when hidden
elem.style.display = 'none' // 'block' | 'inline' to unhide
通过对其classList:的改造
elem.classList.add('hidden') // classList.remove('hidden') to unhide
.hidden {
visibility: hidden; /* occupies same space when hidden */
/* display: none; /* does not occupy any space when hidden */
}
ℹ️还有其他属性可以使用，如
opacity(请参见@Kingfish的评论(，但它们仍然必须通过修改style或classList来更新。
但是哪一个更适合隐藏/取消隐藏大量元素
对于一个或几个元素，修改style或classList将起到相同的作用。但我需要更改数十个甚至数百个元素的可见性。对于音量变化，以下哪种方法更好？
- 最大限度地减少CPU使用
- 最小化重绘延迟
- 最小化UI线程阻塞
我有一台速度很快的电脑，所以很难知道使用性能受限设备对人们的影响。
还有第三条路吗
我想统一显示/隐藏的所有元素都有一个特定的类。最合乎逻辑的是，我应该能够修改该类的CSS规则，即设置其CSS可见性属性，而不是为该类的数百个成员中的每一个添加/删除另一个类。我对此进行了研究，很少有人谈论它，这让我怀疑它是否被认为是黑客攻击，是否在浏览器之间不兼容，或者是否由于其他原因而不好。
有没有一个有充分根据的解释？
还有第三种方法吗？
是的，有。甚至还有第四种方法。
我想同时显示/隐藏的所有元素都有一个特定的类。最合乎逻辑的是，我应该能够修改该类的CSS规则，即设置其CSS可见性属性，而不是为所有这些元素添加/删除另一个类。
是的，这是可能的，使用CSS对象模型。获取定义规则的样式表，获取该类的规则，并更改其定义。
这不是一个黑客攻击，并且有很好的浏览器支持。很少这样做，因为很少有人知道，而且访问正确的规则有点麻烦(首先可以使用CSSOM创建和插入规则对象来解决这个问题(。我不确定它优化得有多好，但它确实需要比更改每个单独元素更少的JS处理。
然而，有一个更简单的解决方案：使用级联样式表！
body.hide-x .x {
display: none;
}
/* or, reverse:
.x {
display: none;
}
body.show-x .x {
display: inline;
}
*/
document.body.classList.toggle('hide-x');
这将根据show-x类是否应用于正文来显示/隐藏文档中具有类x的所有元素。
您可以将display: none替换为visibility: hidden或opacity: 0，也可以根据您的需要集体应用任何其他属性更改。