前端隐藏元素的方式有哪些?HTML 和 CSS 中隐藏元素的多种方法

news2024/11/16 21:40:34

当面试官突然问你:“前端隐藏元素的方式有哪些?”你还是只知道 display: none 吗?


其实,在前端开发的世界里,隐藏元素的方法非常多。每种方法都有自己的小技巧和使用场景,了解它们不仅能让你应对自如,还能让你的代码更优雅。

1. display: none;

  • 效果:元素从文档流中被完全移除,不占用任何空间。
  • 使用场景:当需要彻底隐藏元素且不影响页面布局时。
  • 注意事项:子元素及其内容也会被隐藏,不会被渲染在页面中。
.hidden {
  display: none;
}

2. visibility: hidden;

  • 效果:元素变为不可见,但仍占据其原来的空间。
  • 使用场景:需要隐藏元素但保留其在文档中的位置时。
  • 注意事项:元素仍然可以在屏幕阅读器中被读取。
.hidden {
  visibility: hidden;
}

3. opacity: 0;

  • 效果:元素变得完全透明,但仍占据空间并保持可交互性(例如响应点击)。
  • 使用场景:需要保持布局不变,同时视觉上隐藏元素,并可能保留交互。
  • 注意事项:通常与 pointer-events: none; 结合使用来禁用交互。
.hidden {
  opacity: 0;
  pointer-events: none;
}

4. position: absolute;position: fixed; 结合 top: -9999px;

  • 效果:将元素移出视口,使其不可见。
  • 使用场景:用于临时将元素移出屏幕,保持在 DOM 中的存在。
  • 注意事项:适合动态控制可见性。
.hidden {
  position: absolute;
  top: -9999px;
}

5. clipclip-path

  • 效果:通过裁剪区域来隐藏元素的部分或全部内容。
  • 使用场景:高级布局或动画效果中。
  • 注意事项clip 是旧属性,clip-path 更现代化,支持更多形状裁剪。
.hidden {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

6. height: 0;overflow: hidden;

  • 效果:将元素的高度设置为 0,同时隐藏溢出的内容。
  • 使用场景:用于动画折叠效果或隐藏可展开的内容。
  • 注意事项:适用于动态展开和折叠。
.hidden {
  height: 0;
  overflow: hidden;
}

7. transform: scale(0);transform: translateX(-100%);

  • 效果:缩放或移动元素,使其不可见。
  • 使用场景:用于动画或过渡效果。
  • 注意事项:结合 CSS 过渡时效果更佳。
.hidden {
  transform: scale(0);
}

8. z-index: -1;

  • 效果:将元素放置在所有可见元素的后面。
  • 使用场景:隐藏视觉效果但保持 DOM 存在(不适用于所有情况)。
  • 注意事项:元素仍会参与页面布局。
.hidden {
  z-index: -1;
}

9. HTML 属性 hidden

  • 效果:将元素从视图中隐藏,效果类似于 display: none;
  • 使用场景:在需要快速隐藏时。
  • 注意事项:兼容性较好,但在复杂交互中不常用。
<div hidden></div>

10. aria-hidden="true"

  • 效果:从辅助技术中隐藏元素,使屏幕阅读器不读取。
  • 使用场景:在无障碍性有特定需求时。
  • 注意事项:不会影响视觉呈现,仅对可访问性有效。
<div aria-hidden="true">隐藏内容</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2241766.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android OpenGL ES详解——立方体贴图

目录 一、概念 二、如何使用 1、创建立方体贴图 2、生成纹理 3、设置纹理环绕和过滤方式 4、激活和绑定立方体贴图 三、应用举例——天空盒 1、概念 2、加载天空盒 3、显示天空盒 4、优化 四、应用举例——环境映射:反射 五、应用举例——环境映射:折射 六、应用…

聊天服务器(9)一对一聊天功能

目录 一对一聊天离线消息服务器异常处理 一对一聊天 先新添一个消息码 在业务层增加该业务 没有绑定事件处理器的话消息会派发不出去 聊天其实是服务器做一个中转 现在同时登录两个账号 收到了聊天信息 再回复一下 离线消息 声明中提供接口和方法 张三对离线的李…

T6识别好莱坞明星

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 导入基础的包 from tensorflow import keras from tensorflow.keras import layers,models import os, PIL, pathlib import matplotlib.pyplot as pl…

Odoo :一款免费开源的日化行业ERP管理系统

文 / 开源智造Odoo亚太金牌服务 概述 构建以 IPD 体系作为核心的产品创新研发管控体系&#xff0c;增进企业跨部门业务协同的效率&#xff0c;支撑研发管控、智慧供应链、智能制造以及全渠道营销等行业的场景化&#xff0c;构筑行业的研产供销财一体化管理平台。 行业的最新…

48.第二阶段x86游戏实战2-鼠标点击call

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要…

Vue 学习随笔系列十五 -- 数组遍历方法

数组遍历方法 文章目录 数组遍历方法1. for 循环2. forEach (不会修改数组本身)3. map (不修改数组本身)4. some(不修改数组本身&#xff09;5. every(不修改数组本身&#xff09;6. filter(不修改数组本身)7. find(不修改数组本身)8. findIndex拓展 9. reduce(累加)拓展 1. fo…

FreeRTOS的列表与列表项

目录 1.为什么要学列表&#xff1f; 2.什么是列表和列表项&#xff1f; 2.1 列表 2.2列表项 2.3&#xff0c;迷你列表项 3.列表与列表项的初始化 3.1 列表初始化 3.2列表项初始化 4.列表项的“增删查”&#xff08;插入、删除、遍历&#xff09; 4.1列表项的插入 4.1.1…

数字IC后端教程之Innovus hold violation几大典型问题

今天小编给大家分享下数字IC后端实现Physical Implementation过程中经常遇到的几个hold violation问题。每个问题都是小编自己在公司实际项目中遇到的。 数字后端实现静态时序分析STA Timing Signoff之min period violation Q1: 在Innouvs postCTS时序优化的log中我们经常会看…

VS2022编译32位OpenCV

使用环境 Visual Studio 2022 OpenCV: 4.7.0 cmake: 3.30.2一、使用CMake工具生成vs2022的openCV工程解决方案 打开cmake&#xff0c;选择opencv的源代码目录&#xff0c;创建一个文件夹&#xff0c;作为VS工程文件的生成目录 点击configure构建项目&#xff0c;弹出构建设置…

企业生产环境-麒麟V10(ARM架构)操作系统部署Zookeeper单节点集群版

前言&#xff1a;ZooKeeper是一个分布式协调服务&#xff0c;它为分布式应用提供一致性服务&#xff0c;是Apache Hadoop的子项目。它被设计为易于编程&#xff0c;同时具有高性能和高可靠性。ZooKeeper提供了一个简单的接口和一些基本的文件系统操作&#xff0c;使得开发者能够…

vue3 中直接使用 JSX ( lang=“tsx“ 的用法)

1. 安装依赖 npm i vitejs/plugin-vue-jsx2. 添加配置 vite.config.ts 中 import vueJsx from vitejs/plugin-vue-jsxplugins 中添加 vueJsx()3. 页面使用 <!-- 注意 lang 的值为 tsx --> <script setup lang"tsx"> const isDark ref(false)// 此处…

深度学习服务器租赁AutoDL

1. 根据需要选择租用的显卡 算力市场 1.1 显卡选择 1.2 环境配置 2. 服务器使用 2.1 上传文件 2.2 调试环境 2.3 跑代码 python train.py && /usr/bin/shutdown # && /usr/bin/shutdown表示代码成功运行结束后&#xff0c;自动关机3. 省钱绝招 省钱绝招 …

IDEA部署AI代写插件

前言 Hello大家好&#xff0c;当下是AI盛行的时代&#xff0c;好多好多东西在AI大模型的趋势下都变得非常的简单。 比如之前想画一幅风景画得先去采风&#xff0c;然后写实什么的&#xff0c;现在你只需描述出你想要的效果AI就能够根据你的描述在几分钟之内画出一幅你想要的风景…

【大数据技术基础 | 实验十】Hive实验:部署Hive

文章目录 一、实验目的二、实验要求三、实验原理四、实验环境五、实验内容和步骤&#xff08;一&#xff09;安装部署&#xff08;二&#xff09;配置HDFS&#xff08;三&#xff09;启动Hive 六、实验结果&#xff08;一&#xff09;启动结果&#xff08;二&#xff09;Hive基…

Flume1.9.0自定义Sink组件将数据发送至Mysql

需求 1、将Flume采集到的日志数据也同步保存到MySQL中一份&#xff0c;但是Flume目前不支持直接向MySQL中写数据&#xff0c;所以需要用到自定义Sink&#xff0c;自定义一个MysqlSink。 2、日志数据默认在Linux本地的/data/log/user.log日志文件中&#xff0c;使用Flume采集到…

Onlyoffice配置一 JWT認證

案例 使用官網給c# MVC的例子&#xff0c;主要在版本7.2之後&#xff0c;默認加入JWT認證&#xff0c;docker版本尚且可以在创建的时候使用默认的指令避开&#xff0c;但是在exe版本&#xff0c;即使配置为false&#xff0c;重启之后也会默认开启。 简单说一下如何配置 配置J…

ZeroSSL HTTPS SSL证书ACMESSL申请3个月证书

目录 一、引言 二、准备工作 三、申请 SSL 证书 四、证书选型 五、ssl重要性 一、引言 目前免费 Lets Encrypt、ZeroSSL、BuyPass、Google Public CA SSL 证书&#xff0c;一般免费3-6个月。从申请难易程度分析&#xff0c;zerossl申请相对快速和简单&#xff0c;亲测速度非…

MySql 日期周处理方式

MySql 日期周处理方式 最近在做数仓相关工作&#xff0c;最近遇到 几个问题&#xff0c; 1、计算指定日期是一年中的第几周&#xff0c;周一为周的第一天 2、计算周的开始时间&#xff0c;结束时间 3、计算周对应的年 比如 2023-01-01 WEEKOFYEAR(2023-01-01) 是2022年的52周&…

STM32 BootLoader 刷新项目 (十) Flash擦除-命令0x56

STM32 BootLoader 刷新项目 (十) Flash擦除-命令0x56 1. STM32F407 BootLoader 中的 Flash 擦除功能详解 在嵌入式系统中&#xff0c;BootLoader 的设计是非常关键的部分&#xff0c;它负责引导主程序的启动、升级以及安全管理。而在 STM32F407 等 MCU 上实现 BootLoader&…

【Homework】【5】Learning resources for DQ Robotics in MATLAB

Lesson 5 代码-TwoDofPlanarRobot.m 表示一个 2 自由度平面机器人。该类包含构造函数、计算正向运动学模型的函数、计算平移雅可比矩阵的函数&#xff0c;以及在二维空间中绘制机器人的函数。 classdef TwoDofPlanarRobot%TwoDofPlanarRobot - 表示一个 2 自由度平面机器人类…