1. 简介
LESS 是一种动态的样式语言，它可以为 CSS 赋予动态语言的特性，比如变量、函数、运算。LESS 最终会被编译成 CSS，在前端开发中使用得非常广泛。在 LESS 中，display:none 和 visibility:hidden 都是用来隐藏元素的，但是两者的实现方式和效果有很大的区别，本文将详细介绍它们的区别和注意事项。
2. display:none 和 visibility:hidden 的区别
下面是 display:none 和 visibility:hidden 的区别：
2.1 display:none
display:none会让元素完全不显示，并从文档流中移除。这意味着该元素不会占据任何空间，也不会影响元素布局。同时，该元素的所有子元素也会跟着被隐藏。- 使用 JavaScript 可以动态设置
display:none样式。
示例代码：
----- -
-------- -----
-2.2 visibility:hidden
visibility:hidden会让元素不可见，但是元素仍旧会占据空间，并影响元素布局。同时，该元素的所有子元素会保留其可见性。- 使用 JavaScript 可以动态设置
visibility:hidden样式。
示例代码：
----- -
----------- -------
-3. 注意事项
下面是使用 display:none 和 visibility:hidden 需要注意的问题：
3.1 网络性能
使用 display:none 会从文档流中移除元素，这意味着浏览器不需要计算其布局，从而可以显著提高页面加载速度。而 visibility:hidden 只是使元素不可见，但是仍需要浏览器计算其布局信息。因此，如果您需要隐藏元素，而且这些元素在页面加载时需要被隐藏，那么使用 display:none 会带来更好的性能优势。
3.2 辅助技术
使用 display:none 会从文档流中移除元素，这会影响一些辅助技术的使用，比如屏幕阅读器。因此，如果您需要实现无障碍需求，那么使用 visibility:hidden 会是更好的选择。
3.3 布局问题
使用 visibility:hidden 不会改变元素的布局信息，所以它在一些布局问题上表现更好。比如，当您需要让某个元素占据空间，但是您不想让它在屏幕上显示，那么使用 visibility:hidden 会是更好的选择。
4. 结论
对于前端开发者来说，使用 display:none 和 visibility:hidden 都有其各自的用途，根据实际需要选择合适的隐藏方式。如果您需要让元素在页面加载时被隐藏，那么使用 display:none 会带来更好的网络性能。如果您需要实现无障碍需求，那么使用 visibility:hidden 会是更好的选择。同时，在一些布局问题上，使用 visibility:hidden 也会表现更好。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f659e3c5c563ced5838651