display:none 和visibility:hidden的区别

最新推荐文章于 2024-11-20 12:06:44 发布

转载最新推荐文章于 2024-11-20 12:06:44 发布 · 257 阅读

标签

#html

收录于

本文详细解析了display:none和visibility:hidden这两种隐藏HTML元素的方法，对比了它们在DOM操作中的不同表现，揭示了在实际应用中如何选择合适的隐藏方式。

二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。
display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yymycabbage

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）

单枪匹码

11-08

4万+

一、使用CSS的 display 属性来隐藏或显示div： display 属性规定元素应该生成的框的类型，可以通过 display：none 来隐藏某一元素。 style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1...

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

隐藏div的四种方式

Sixology的博客

12-18

1万+

隐藏div是指所选择的div不显示在页面上，但是隐藏后有两种效果 1.隐藏过后的div的位置还是被占用了 2.隐藏过后的div的位置没有被占用下面看几种隐藏div的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&...

元素的显示与隐藏（display、visibility、overflow比较）

Liyunhao_haoge的博客

10-13

833

元素的显示与隐藏（display、visibility、overflow比较）在CSS中有三个显示和隐藏的单词比较常见，分别是display visibility 和overflow 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是重新刷新页面，它们又会出现。 display 显示 display：设置或检索对象是否显示。 dis...

如何在html里面隐藏DIV元素？使用场景是什么？底层原理是什么？

长风破浪会有时的博客

10-19

2171

页面初始化时隐藏：如果某些内容在页面加载时不需要显示，但在后续操作中可能会显示出来，可以使用。保留布局位置：如果需要保留某个元素的位置，但暂时不想显示其内容，可以使用。动态控制显示状态：如果需要根据用户的交互或其他条件动态控制元素的显示状态，可以使用 JavaScript 来修改元素的display属性。快速定义样式：如果需要在 HTML 标签中快速定义样式，可以使用内联样式。CSSdisplay属性：控制元素是否在页面上绘制及占用空间。CSSvisibility属性。

替换手机号中间4位（php，js）

mobeinight的专栏

12-24

2010

JS方法function hideMobile(num){ var mphone =num.substr(3,4); var lphone = num.replace(mphone,"****"); return lphone; } php方法 $phone=substr_replace($phone,'****',3,4);

display:none和visibility:hidden两者的区别

最新发布

ppoo240218的博客

11-20

1692

布局：元素从页面中完全移除，不占据任何空间。：元素不可见，但仍然占据空间。页面重绘和重排：由于元素被完全移除，页面会触发回流和重绘，完全移除元素。。：页面只会触发重绘（repaint），不会触发重排。动画和过渡：在使用 CSS 过渡和动画时，不太容易实现，因为元素被完全移除。：可以配合 CSS 过渡和动画实现隐藏和显示效果，因为元素仍然存在。

详解display:none和visibility: hidden的区别

包磊磊的博客

01-18

2549

本章的主要内容是利用CSS控制元素的“显隐”，说道显隐，之前其实已经提供了一些非常规的CSS方法，如clip，z-index，opacity等，本章我们来深入探究一下display:none和visibility: hidden折两个属性。 1.display与元素的显隐对于一个display计算值是none的元素而言，该元素及其后代元素全部都被隐藏（请记住这个概念，等下对比下visibi...

visibility:hidden和display:none的区别

SoLoJia的博客

03-15

2万+

visibility:hidden和display:none有以下几种不同，分别是1、作用不同；2、使用后HTML元素有所不同；3、定义不同。 1、作用不同: visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。 display:none将元素的显示设为无，即在网页中不占任何的位置。 2、使用后HTML元素有所不同: visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、

前端设置div的显示与隐藏

weixin_43041350的博客

01-09

4253

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白。通过设置display属性可以使div隐藏后释放占用的页面空间。

div隐藏(设置div隐藏)

计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。

02-25

4437

javascript div的显示隐藏这个需求很简单 btn1 btn2 btn3 $(function(){ varitems=$('.content.item');//拿到所有的div varbtns=$('.navbutton');//拿到所有的按钮 btns...

关于div的隐藏

yuriliuyu的博客

01-23

178

display:none&visibility:hidden 二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。display:none;使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说...

隐藏div的几种常见方法

fatansitic的博客

03-02

5万+

面试的时候被问了有几种方法实现让一个div隐藏，被面的时候脑子一片空白，现在稍微冷静地研究了一番，来总结一下吧! 1.display:none; 2.visibility:hidden; 3.background-color:transparent;或者设成与背景一样的颜色即可 4.opacity来设置不透明级别，注意兼容性filter… 5.给div一个margin负值，这个负值恰好等于

CSS中除了display:none以外，可以隐藏页面元素的几种方法

Benjamin920813的博客

09-17

4430

CSS中除了display:none以外，可以隐藏页面元素的几种方法 display：none display:none是我们最常用的隐藏页面元素的方法，使用display:none方法隐藏的页面元素，应该算是真正意义上的隐藏，因为它使元素完全不占空间，连盒模型也不生成，任何基于该元素的用户交互操作也不会起作用，并且读屏软件也读不到它，一旦某个页面元素被设置了display:none的属性后，该元...

css中实现div的显示和隐藏

weixin_34195142的博客

02-01

7357

为什么80%的码农都做不了架构师？>>> ...

CSS中设置border属性为0与none的区别

路漫漫~

05-12

5万+

在我们设置CSS的时候，对标签元素不设置边框属性或者取消边框属性一般设置为：border:none;或border:0;两种方法均可。 border:none;与border:0;的区别体现有两点：一是理论上的性能差异；二是浏览器兼容性的差异。 1.性能差异【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对bord

【HTML】div显示与隐藏相关内容

Dream_Lee的博客

03-16

9907

隐藏div的几种常见方法 1.display:none; 2.visibility:hidden; 3.background-color:transparent;或者设成与背景一样的颜色即可 4.opacity来设置不透明级别，注意兼容性filter… 5.给div一个margin负值，这个负值恰好等于div自身的高度或宽度 6.设置两个大小一样的div，第一个左浮动，第二个不浮动，即可将第二个...

div控制显示与隐藏状态的两种方式

Scrow1204的博客

11-02

9155

要点： 1.本人原来用的是IDEA编译器，因为什么环境都配置好了，代码提示功能也好，界面也优美，可惜什么都好导致太庞大。本人在自习室敲代码，笔记本电池管不了一上午，后用sublime，真轻便哈哈。但是里面的插件的代码其实，应该是只收录了js的关键字，然后给的提示，并不会筛选。这里，因为前段时间写网页布局，用了很多浮动，有个overflo:hidden经常用，这里写了display:hidden，...

jQuery显示隐藏div的几种方法

skh2015java的博客

10-11

8万+

1、$("#demo").attr("style","display:none;");//隐藏div $("#demo").attr("style","display:block;");//显示div 2、$("#demo").css("display","none");//隐藏div $("#demo").css("display","block");//显示div 3、$("#demo