css样式隐藏元素(使用CSS隐藏页面元素的几种方法)
css样式隐藏元素(使用CSS隐藏页面元素的几种方法)
2024-11-05 10:15:56  作者:围观果果  网址:https://m.xinb2b.cn/know/ucy256693.html

一说起隐藏HTML页面上的元素,很多人第一反应就是设置元素的CSS属性display:none;值,这是一种最常见的隐藏页面元素方法本篇文章我们就一起看看使用CSS隐藏页面元素的方法,以及它们的区别,现在小编就来说说关于css样式隐藏元素?下面内容希望能帮助到你,我们来一起看看吧!


css样式隐藏元素

前言

一说起隐藏HTML页面上的元素,很多人第一反应就是设置元素的CSS属性display:none;值,这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法,以及它们的区别。

本篇文章中的例子直接放到github地址中,感兴趣的同学可以自取。

http://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文说的一样,最简单也最粗暴的方法就是设置元素的display属性为none;

display:none;

设置为display:none;的元素将不会再占用页面空间,其占用的空间会被其他元素所占有,从而会引起浏览器的重排和重汇。

方法2-visibility: hidden

另外一种方法是设置元素的visibility属性为hidden。

visibility: hidden

这种做法虽然能够隐藏元素,但是该元素仍会占用页面空间,因此只会导致浏览器的重汇而不会引起重排。

如果希望元素隐藏后不会引起页面布局的变化,则推荐使用visibility:hidden;方式。

方法3-opacity:0

设置元素透明度opacity属性为0,也可以隐藏页面元素。

opacity:0

在呈现上与visibility:hidden;方式一样,同样会占据页面空间。

差异性-页面布局

对页面布局的影响主要是看是否会引起浏览器的重汇和重排,对应的差异如下图所示。

页面布局差异

差异性-事件绑定

display:none;的元素会直接从页面上消失,因此在该元素上绑定的事件不会生效。

visibility: hidden;的元素不会触发绑定的事件。

opacity:0; 的元素会触发绑定的事件,例如点击会触发click函数。

我们可以通过以下的例子来看看。

首先我们定义两个div,分别设置为visibility: hidden;和opacity:0,在两个div上分别绑定一个click事件。

定义div元素

绑定的事件

当我们在两个元素都进行点击时,可以在控制台看到如下输出结果。

结果

从上述结果可以看出和上述结论一致。

差异性-动画属性

display:none;的元素会直接从页面消失,因此定义transition效果完全无效。

visibility:hidden;的元素会在transition设置的时间内消失,但是没有动画效果。

opacity:0;的元素可以和正常元素一样,从页面以动画效果消失。

同样我们可以通过以下这个例子来看看。

首先,我们定义两个div,并设置其transition属性。

div元素

定义transition效果

我们通过将鼠标移至元素上,可以看到两者的差异,从而验证了上述结论的正确性。

结束语

本篇文章主要讲解了使用CSS隐藏元素的几种常用方法,并讲解了它们之间的区别,以便大家在特定的场景中进行选择。

  • 6月份港剧播出时间表(有港剧情结的看过来)
  • 2024-11-06有港剧情结的看过来中新网北京10月17日电16日,优酷港剧场嘉年华在北京举行,现场发布优酷与TVB同步播出的三大台庆剧《跳跃生命线》、《兄弟》、《是咁的,法官阁下》以及年底压轴大戏《大帅哥》大合影当天,《跳跃生命线》监。
  • 演技烂到不像话的女明星(演技被高估的5个女明星)
  • 2024-11-06演技被高估的5个女明星演员也和很多普通职业一样,并非一劳永逸,而是需要不断地去钻研有些演员或许演过一些经典的角色,但并不能保证他的演技一直在线况且演员除了演技外,还要对角色有很好的理解所以敬业一些的演员,对于自己所不熟悉的。
  • 巴西女演员桑托斯(文化总是国际交往中的先行者)
  • 2024-11-06文化总是国际交往中的先行者新华社里约热内卢7月12日电专访:文化总是国际交往中的先行者——访巴西著名演员卢塞莉亚·桑托斯新华社记者赵焱陈威华“文化总是国际关系和交往中的先行者我被中国人民认识是因为一部电视剧,我扮演的人物伊佐拉。
  • 赵氏孤儿案最终结果(感动东西方的伪造悲剧)
  • 2024-11-06感动东西方的伪造悲剧我们阅尽铅华,只为呈现不一样的历史要说中国历史上哪一部古典戏剧最为出名,恐怕非《赵氏孤儿》莫属,不仅民间百姓对此可谓家喻户晓,就连法国著名文学家伏尔泰也听说了这一故事,并将其改编为话剧《中国孤儿》民国。
  • 自残制“血吊坠”为男友挡灾(诱人自残血吊坠)
  • 2024-11-06诱人自残血吊坠来源:中国新闻网说到“吊坠”这种饰品,你首先会想到什么材质的呢?金银、玉石珠宝?最近,年轻人中却开始流行一种号称能“辟邪”的情侣吊坠,这种吊坠的完成,需要用到女生的鲜血截图自网络“血吊坠”走红,有商家。
  • 什么修仙类游戏好玩的(好玩的修仙游戏推荐)
  • 2024-11-06好玩的修仙游戏推荐在游戏中修仙也是常用的一种题材,诞生于小说的这种题材满足了很多玩家对于仙人的一些幻想,那么有什么比尼奥有趣的修仙游戏可以玩呢,今天就让小编来带大家看看吧好玩的修仙游戏推荐1、神行逐日神行逐日是一款由挂。
  • 春天去日本旅游带什么吃的(没吃过这些季节限定美食)
  • 2024-11-06没吃过这些季节限定美食秋天到日本旅游,不仅气候舒适宜人,有枫红美景可看,还有众多美食等着你去品尝四季分明的日本,每年8月左右气温开始逐渐下降,所谓「秋天」指的是9~11月这段期间此时刚摆脱炎炎夏日,整个人神清气爽,胃口也跟。
  • 镜花缘的书好看吗(1分钟了解一本书镜花缘)
  • 2024-11-061分钟了解一本书镜花缘小时候的科幻读物,十分有趣《镜花缘》是清代文人李汝珍创作的长篇小说小说前半部分描写了唐敖、多九公等人乘船在海外游历的故事,包括他们在女儿国、君子国、无肠国等国的经历史后半部写了武则天科举选才女,由百花。
  • 白蛇传六个小题目连环画 白蛇传连环画寻踪
  • 2024-11-06白蛇传六个小题目连环画 白蛇传连环画寻踪说说白蛇传故事的由来白蛇传流传数百年,白娘子、许仙、小青和法海等人物形象早已深入百姓心中翻看唐代到元代的志怪小说,蛇精总是害人的反派到了明代,民间故事改造大师冯梦龙写了一篇《白娘子永镇雷峰塔》,文中白。
  • 营销模式有哪些(当下最流行的营销方式)
  • 2024-11-06当下最流行的营销方式本文谈谈常见的电商类型以及如何选择适合产品的电商平台模式电商是互联网长期不变的主题,几乎你看到所有的创业项目最终都要靠电商来进行变现尤其是公众号、快手、抖音、小红书等内容平台上的博主,还有像经期、睡眠。
  • 鸽眼对养鸽的影响(从不看鸽眼血统系统配对)
  • 2024-11-06从不看鸽眼血统系统配对种鸽 健康 血统 运气 谁重要?本文参加“我的秋赛报告”有奖征文大赛不知不觉养鸽已经四个年头,酸甜苦辣,我都尝试过,开心过,也失落过个人认为养鸽配对靠悟性,18年初引进威廉迪布恩齐达内直子8305以前。