常用隐藏元素的几种方法

隐藏元素的艺术：display:none与visibility:hidden对比

最新推荐文章于 2022-09-18 11:06:40 发布

原创最新推荐文章于 2022-09-18 11:06:40 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

diaplay:none

display属性是真正隐藏元素，将display属性设为none确保元素不可见，且被隐藏的元素不占据任何空间。不仅如此，任何这个元素的子孙元素也会被同时隐藏，而且一旦display设为none任何对该元素直接打用户交互操作都不可能生效。

此外元素在读屏软件中会被隐藏。

但是可以通过DOM节点访问到这个元素。

visibility:hidden

被隐藏的元素依然会占据空间，对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。

此外元素在读屏软件中会被隐藏。

opacity:0

opacity属性是把一个元素的透明度属性设置0，从而达到隐藏的效果，被隐藏的元素依然会占据空间，并对网页的布局起作用。与visibility不同的是将响应用户交互。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Wind.zi

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css中实现元素隐藏的几种方法

simple_Xsg的博客

04-09

2万+

一、display:none; display翻译成中文是显示、展览的意思；将display的属性改为none可以实现元素的隐藏，元素和盒子模型也不生成，被隐藏的元素不占位置，看不见摸不着，它会导致浏览器的重排和重绘。二、visibility:hidden; visibility翻译成中文是能见、可见性的意思；hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏，和display:none的区别是它占位置，看不见但是摸得着，所以它只会导致浏览

jQuery控制TR显示隐藏的几种方法

10-25

在本文中，我们将深入探讨使用jQuery来控制TR显示隐藏的几种方法。首先，最常见的方法是通过ID来控制。这种方法适用于在HTML生成时为每个需要控制的TR元素分配唯一的ID。例如： ```html 这行不隐藏这行要隐藏这...

参与评论您还未登录，请先登录后发表或查看评论

css隐藏元素的几种方法

webchang的博客

03-02

548

css隐藏元素的8种方法，代码演示和分析

元素隐藏的几种方式

娓娓道来

08-06

391

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; bor...

常见隐藏元素的方法

weixin_43356259的博客

04-26

260

常见隐藏元素的方法一般面试官经常会问这个问题,那么,常见的隐藏元素的方法有哪几种呢? 小源在这儿总结了几点: 1:设置opcity为0; 2:visiblity设置为hidden 3:display为none 4:设置宽或高为0 5:把元素推到很远的地方而使元素看不到那么推荐使用哪种呢一般情况下推荐使用visbility,为什么呢?因为使用 display:none会触发reflow和repaint,而visibility只会触发repaint 如果该元素有图层的情况下使用opcity设置为0,因为o

请列举几种隐藏元素的方法

LuckXinXin的博客

02-20

360

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在 opacity: 0; CSS3属性，设置0可以使一个元素完全透明 position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外 display: none; 元素会变得不可见，并且不会再占用文档的空间。 transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留 <div hidden="hidden"&gt.

css常见隐藏元素的方法

Dear

11-27

392

1、使用 display：none隐藏元素，隐藏后该元素不会在页面中占据位置，也不会响应绑定的监听事件 2、使用visibility:hidden隐藏元素，隐藏后该元素会在页面中占据位置，但是不会响应绑定的监听事件 3、使用 optaicy：0隐藏元素，隐藏后该元素会在页面中占据位置，会响应绑定的监听事件 4、通过绝对定位将元素移除到可视区域外 5、通过 translate: scale(0, 0)，来缩放该元素，以实现隐藏。元素会在页面中占据位置，但是不会响应绑定事件 <!DOCTYPE htm.

CSS隐藏网页文字的几种常用方法

09-27

本文将详细讲解CSS中常用的几种隐藏网页文字的方法，以及它们各自的优缺点。 1. `display:none` `display:none` 是最直接的隐藏方式，它可以使得包含的文字和其所在的容器完全消失，从视觉上不可见。然而，这种...

Html 元素隐藏的几种方式

09-28

在文档中提及的几种隐藏元素的方法中，主要涉及了CSS中的display属性以及JavaScript的DOM操作，下面将详细介绍这些方法。首先，CSS中的display属性是控制元素可见性的常用工具，它能够控制元素是否显示以及其布局...

CSS“隐藏”元素的多种方法的对比

12-13

几种方法的简单介绍首先我们分别来说说到底有哪几种隐藏元素的方法，有一些方法是众所周知的，还有一些算是一种技巧。 display:none 设置元素的display为none是最常用的隐藏元素的方法。 CSS Code复制内容到剪贴

基础知识点 css篇

D_Z_Yong的博客

11-15

307

隐藏元素的方法有哪些 display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。 opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 z-index: 负值：来使其他元素遮盖住该元素，以此

隐藏元素的方法总结

forward_xx的博客

09-18

766

本文从完全隐藏、视觉上隐藏、语义上隐藏三个角度来对CSS隐藏元素方法进行了总结，并分析比较opacity: 0、visibility: hidden、display: none 的区别和优劣。

隐藏元素的几种方法

热门推荐

Wennsai的博客

10-06

1万+

隐藏元素的几种方法 1、overflow:hidden; 防止溢出，也是一种隐藏，只不过是把超出范围的元素隐藏，这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用 2.display:none 设置元素的display为none是最常用的隐藏元素的方法。 .hide { display:none; } 这就是完全的隐藏了，直接消失，任何对该元素直接的用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。 3、opacity:0 opacity属性表示

清除浮动

02-01

192

第一种方式： //IE浏览器 .clearfloat{ zoom:1} //其他浏览器.clearfloat ; after{ display:bloak; clear:both; content:""; visibility: hidden; height:0} 第二种方式：更优雅的 //IE浏览器 .clearfloat{ zoom:1} //其他浏览器....

CSS中容易忽略的知识点集锦

weixin_48390287的博客

03-08

460

CSS中的一些冷知识长度单位在CSS样式层叠表中，我们可使用到的长度单位一般有如下的几种方式：像素：px 百分比 em: 这是一个相对单位，是相对于当前元素的字体大小进行计算，也就是说 1em=1font-size rem: 这也是一个相对单位，不同的是，rem是相对于根元素的字体大小进行计算的。伪类和伪元素伪类：用来描述一个元素的特殊状态：hover，：active等等伪元素：用来描述一个元素的特殊匹配位置如：：before，：：after等等其实，伪类和伪元素的出现都是为了

元素隐藏的不同方式

ZXR__的博客

10-31

221

在项目中往往需要用到不同的隐藏元素的方法，每种方法都有不同的特性效果如下 1.第一种方式：display:none 点击隐藏后不会占位效果如下： 2.第二种方式：visibility: hidden 点击隐藏后会占位效果如下 3.第三种方式：opacity:0 点击后占位效果如下 4.第四种方式：height:0;border:0 点击后占位效果如下 ...

5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

culh2177的博客

09-03

2409

5种css隐藏元素的方法There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling. 在CSS中隐藏元素有多种方法，但是它们影响可访问性，布局，动...

CSS隐藏元素的五种方法

qq_42181069的博客

05-15

877

平常在写代码的时候有比较常用到几种隐藏元素的方法，在参考了许多大神的笔记之后，整理了一下关于隐藏元素的如下五种方法：1、display：none；div { display:none; }display:能将元素真正隐藏，而且隐藏的元素不会占据任何空间，会让人觉得这个元素好像完全不存在。但是该元素是能够被访问到的，可以通过DOM来操作这个元素。2、opacity:0;div { op...

前端隐藏元素的方法

最新发布

07-29

在前端开发中，隐藏 HTML 元素是常见的需求，通常用于动态控制页面内容的可见性。以下是几种常用的隐藏 HTML 元素的方法： ### 1. 使用 `display: none` 将元素的 `display` 属性设置为 `none` 可以完全隐藏元素，使其不占用页面布局空间，并且无法与用户进行交互。这种方法适用于需要彻底隐藏元素的场景。 ```css .hidden-element { display: none; } ``` 这种方法隐藏的元素不会在页面上显示，也无法通过读屏软件访问到[^1]。 ### 2. 使用 `visibility: hidden` 通过设置 `visibility: hidden`，元素在页面中不可见，但仍然保留其占据的空间。这种方法适用于需要隐藏元素但希望保留其布局位置的场景。 ```css .hidden-element { visibility: hidden; } ``` 这种方法隐藏的元素虽然不可见，但仍然可以与用户交互（例如通过 JavaScript），并且可以通过读屏软件访问到[^2]。 ### 3. 使用 `opacity: 0` 设置元素的 `opacity` 属性为 `0` 可以使元素完全透明，从而实现视觉上的隐藏效果。元素仍然占据页面空间，并且可以与用户交互。 ```css .hidden-element { opacity: 0; } ``` 这种方法适用于需要隐藏元素但希望保留其交互功能的场景。 ### 4. 使用 `position` 属性隐藏元素通过将元素的 `position` 设置为 `absolute` 或 `fixed`，并将其定位到屏幕外，可以实现隐藏效果。这种方法隐藏的元素不可见，但仍可能通过读屏软件访问到。 ```css .hidden-element { position: absolute; left: -9999px; } ``` 这种方法适用于需要隐藏元素但仍希望保留其可交互性的场景[^3]。 ### 5. 使用 HTML 的 `hidden` 属性 HTML5 提供了 `hidden` 属性，可以直接标记元素为隐藏状态。这种方法隐藏的元素不可见，并且不占据页面空间。 ```html <div hidden>隐藏的内容</div> ``` 这种方法适用于需要快速隐藏元素的场景，类似于 `display: none` 的效果[^1]。 ### 6. 使用 `overflow: hidden` 通过设置父元素的 `overflow` 属性为 `hidden`，可以隐藏子元素超出父元素边界的部分。这种方法通常用于限制内容的显示范围。 ```css .parent-element { overflow: hidden; } ``` 这种方法适用于需要隐藏部分内容并控制其显示范围的场景[^2]。 ### 7. 设置元素的宽高为 0 通过将元素的宽度和高度设置为 `0`，可以隐藏元素。这种方法通常需要结合其他样式属性来实现更复杂的隐藏效果。 ```css .hidden-element { width: 0; height: 0; } ``` 这种方法适用于需要隐藏元素并控制其布局的场景[^2]。 ### 8. 使用 JavaScript 动态控制通过 JavaScript 的 DOM 操作，可以动态修改元素的样式或属性来实现隐藏效果。例如，可以通过修改 `style.display` 或 `style.visibility` 来控制元素的可见性。 ```javascript document.getElementById("element").style.display = "none"; ``` 这种方法适用于需要根据用户交互或动态条件隐藏元素的场景。 ###