LESS 中使用 display:none 和 visibility:hidden 区别与注意事项

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

阅读全文

猜你喜欢

  • 使用 ESLint 检查 Angular 应用程序中的代码

    在 Angular 应用程序中，编写可靠的代码是非常重要的。代码质量不仅影响到应用程序的性能和可维护性，也影响到应用程序的安全性和稳定性。使用 ESLint 工具可以检查 Angular 应用程序中的...

    2 个月前
  • JavaScript 标准的发展历程研究

    JavaScript，通常简称为 JS，是一种面向对象、动态类型语言，常用于在网页浏览器中进行客户端脚本编程，从而实现网页动态效果及交互功能。JavaScript 诞生于 1996 年，经过多年的发展...

    2 个月前
  • Promise 的使用技巧及最佳实践

    在前端开发中，异步操作是非常常见的场景，例如 Ajax 请求、定时器、文件读取等等。在过去，我们通常使用回调函数来处理异步操作，但是回调函数会带来回调地狱（callback hell）的问题，代码复杂...

    2 个月前
  • Serverless 架构 —— Lambda 执行环境如何做到高效

    简介 Serverless 架构是近年来备受关注的新型架构，它有很多优点，例如无需管理服务器、按需伸缩、精细计费等等。其中，Lambda 是 AWS 家族中使用率较高的一种无服务器计算服务。

    2 个月前
  • 在现实世界中优化 GraphQL 查询效率

    GraphQL是一种流行的数据查询语言和API，它在现代Web应用程序中的使用越来越普遍。然而，在查询大量数据时，GraphQL性能可能会变得较慢。本文将介绍如何在现实世界中优化GraphQL查询效率...

    2 个月前
  • ES10 中使用 Object.entries 方法对对象进行遍历

    ES10 是 ECMAScript 2019 的正式规范，其中有很多新的特性和改进。其中一个很有用的特性就是 Object.entries 方法。它可以将一个对象转换成键值对数组，然后可以使用数组遍历...

    2 个月前
  • 使用 SSE 实现服务端推送数据的完整范例

    随着 Web 技术的发展，越来越多的互联网应用需要实时更新数据。这种特殊的需求需要服务端主动推送数据到客户端，而不是客户端轮询或者某些人为触发的操作。Server-Sent Events (SSE)，...

    2 个月前
  • 如何将 ES6 项目快速升级至 ES7 版本

    前言 ES6 作为 ECMAScript 的一个重大更新版本，带来了很多新的语法和特性。然而，在实际开发中，我们可能仍然需要使用一些 ES7 的特性来提高代码的质量和开发效率。

    2 个月前
  • Babel 如何支持高阶函数的编译？

    在 JavaScript 中，高阶函数是一种特殊的函数，它接收一个或多个函数作为参数，并返回一个新的函数。高阶函数在函数式编程中经常使用，但对于初学者来说，理解并使用高阶函数可能会有一定难度。

    2 个月前
  • 无障碍设计技巧：如何为单手操作用户提供更好的操作？

    随着社会的进步，无障碍设计在互联网上变得越来越重要。单手操作用户是残障人士的一个常见群体，为了不让他们被网站和应用程序上的操作所限制，我们需要为他们提供更好的操作体验。

    2 个月前
  • PM2 是如何守护 Node.js 进程，实现自启动和自重启的？

    什么是 PM2？ PM2 是一个流行的进程管理工具，可用于管理 Node.js 应用程序。它是为了简化服务器上 Node.js 应用程序的部署和维护所设计的。 通过 PM2，您可以轻松地启动、停止、监...

    2 个月前
  • Koa 中使用 koa-cors 实现跨域请求的方法

    跨域请求在前端开发中是一个比较常见的需求。而 Koa 是一个很流行的 Node.js 框架，因此灵活地使用 Koa 来实现跨域请求也是前端开发中的一项重要技能。本文将详细介绍如何在 Koa 中使用 k...

    2 个月前
  • 解决 Material Design 中使用 TabLayout 禁止用户滑动的问题

    在 Android 应用中，Material Design 中的 TabLayout 是非常常见的控件之一。然而，在某些情况下，我们可能希望禁止用户通过手指滑动 TabLayout 来切换 Tab 的...

    2 个月前
  • React.js 和 Next.js 之间的区别

    React.js 和 Next.js 是目前前端领域流行的两个框架。React.js 是由 Facebook 开源的 JavaScript 库，用于构建用户界面，而 Next.js 是基于 React...

    2 个月前
  • RESTful API 的支持和维护技巧

    在现代化的 Web 应用开发中，RESTful API（Representational State Transfer API）是非常重要的一部分。鉴于其可扩展性和可重用性，它已经成为了许多公司开发新...

    2 个月前
  • 使用 MongoDB 存储非结构化数据的指南

    什么是非结构化数据？ 非结构化数据是指那些没有明确定义数据模型的数据。通常这种数据不容易以表格或关系形式存储。非结构化数据通常包括文本、图像、视频、音频等。 在前端开发中，非结构化数据是非常普遍的，比...

    2 个月前
  • Performance Optimization：使用 JProfiler 提高 Java 应用性能

    什么是 JProfiler JProfiler 是一款功能强大的 Java 应用性能分析工具，它能够监控并分析 Java 应用的各种性能问题，并提供可视化的数据报告和建议性的优化建议。

    2 个月前
  • 解决在 Hapi 应用程序中引用未定义名称的错误

    在开发 Hapi 应用程序时，我们可能会遇到一个常见的问题：出现未定义名称错误。这个错误通常发生在尝试使用未定义的变量或函数时，导致应用程序无法正常运行。本文将介绍如何解决在 Hapi 应用程序中引用...

    2 个月前
  • PWA开发中如何避免缓存一致性问题

    在 PWA 的开发中，缓存对于提高应用性能和用户体验来说具有重要的作用。但是，缓存可能会导致一致性问题。例如，当您在应用程序中更改某个文件时，浏览器可能会从缓存中读取旧文件，而不是从服务器获取新文件。

    2 个月前
  • ESLint 如何处理错误匹配

    在前端开发过程中避免错误是至关重要的一步。而这时候 ESLint 就会派上用场了。ESLint 是一款开源的 JavaScript 代码检查工具，可以让开发者在编写代码时自动检测潜在的问题并修复它们。

    2 个月前

相关推荐

    暂无文章