css样式隐藏元素(使用CSS隐藏页面元素的几种方法)
css样式隐藏元素(使用CSS隐藏页面元素的几种方法)
2024-11-22 06:25:41  作者:围观果果  网址: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隐藏元素的几种常用方法,并讲解了它们之间的区别,以便大家在特定的场景中进行选择。

  • 文言文实词和虚词整理题型(备考2023一轮文言文复习)
  • 2024-11-22备考2023一轮文言文复习(2022·全国甲卷)阅读下面的文言文,完成下面小题陈轸对曰:“臣见商于之地不可得,而患必至也”王曰:“何也?”对曰:“夫秦所以重王者,以王有齐也今地未可得而齐先绝,是楚孤也,秦又何重孤国?且先绝齐,。
  • 顶流时期的鹿晗有多火(昔日顶流鹿晗为何只剩三个代言)
  • 2024-11-22昔日顶流鹿晗为何只剩三个代言大家都知道当年鹿晗的人气是现阶段很多流量艺人都望尘莫及的,之前他在韩国当练习生,经过训练之后,业务能力是非常强的,回国之后凭借超高的人气和出众的外形圈粉无数有网友表示,在鹿晗出现之前是没有顶流艺人这个。
  • 易经64卦图象解析(易经64卦图象解析)
  • 2024-11-22易经64卦图象解析随:元亨利贞,无咎《彖》曰:随,刚来而下柔,动而说,随大亨贞,无咎,而天下随时随之时义大矣哉!《象》曰:泽中有雷,随君子以向晦入宴息图像解析图中:云中雁传书,一堆书,朱门内有人坐,一人门外立,地上一串。
  • 最近很火又很好看的国漫有哪些(这部一年出一集的国漫)
  • 2024-11-22这部一年出一集的国漫女扮男装,行走江湖,功夫不佳,但是也在江湖闯出一片天地,她就是江湖小贼风铃儿,在闯荡江湖的过程中,凭借自己得聪明才智,养活自己完全没有问题不过,有故事就会有意外发生,在一次记得打劫过程中,碰上了一位商。
  • 英雄联盟讨论一下新赛季ez出装(英雄联盟S9的EZ最强出装)
  • 2024-11-22英雄联盟S9的EZ最强出装很多人心里都有自己最钟爱的英雄EZ是峡谷创建以来就有的英雄,当初很多人喜欢上英雄联盟就是因为那个黄头发的少年随着版本的更新,EZ出现过很多的玩法,无论是蓝EZ还是打野EZ在当时都是风靡峡谷如今的EZ经。
  • 金针菇包饺子怎么做(用金针菇包饺子)
  • 2024-11-22用金针菇包饺子饺子不仅仅是我们喜爱的一种美食,更是传承了中国千百年的历史,形成了一种饮食习俗那么我们平时比较喜欢吃的饺子都是什么馅的呢?应该是韭菜鸡蛋、猪肉大葱、香菇包菜、芹菜等这些的比较多吧,而我却吃到了婆婆用金。
  • 霸铃柴油车490发动机火花在什么地方(怎么检查故障)
  • 2024-11-22怎么检查故障在发动机缸盖旁边,燃烧室上面中央高压线是否跳火的检查,从分电器上拔下中央高压线(捏住高压线橡胶套沿分电器轴线方向拔出)将高压线端接在备用火花塞上,将火花塞抵在缸体上,或者将高压线插好用正时灯夹子夹起动。
  • 怎么取消授权腾讯小程序(腾讯小程序上线问题疫苗查询入口)
  • 2024-11-22腾讯小程序上线问题疫苗查询入口36氪讯,微信小程序“腾讯安心计划”,今日紧急开通问题疫苗查询入口,用户可通过该入口查询疫苗批次是否已被监管部门列入“召回疫苗”同时,本周内“腾讯安心计划”还将开通疫苗共享预警通道,为同批次问题疫苗接。
  • 赵本山徒弟们拍的电影(赵本山的徒弟们纷纷拍电影)
  • 2024-11-22赵本山的徒弟们纷纷拍电影周云鹏主演的科幻片喜剧片《明日重生》最近上映了这部由本山传媒出品的电影利用“软科幻”的外壳包装了一个喜剧故事其中,周云鹏饰演的“怂包”为了保护自己暗恋的女神安琪博士,在大反派来抢安琪实验室的研究成果是。
  • 陈昊蓝现状(主持业务能力差)
  • 2024-11-22主持业务能力差2020年,打着双女主旗号的电视剧《了不起的女孩》一开播就获得了超高的收视率,随着剧集的播出热门话题也跟着不断出现而在金晨和李一桐两个主角外,大家又发现另一位女演员的戏份十分多,有的剧集竟超过了其他二。
  • 张裕红酒价格表种类(张裕百年干红葡萄酒价格)
  • 2024-11-22张裕百年干红葡萄酒价格在纪录片《新国货》中,吴晓波说了这样一段话:“国货品牌最大的机遇与挑战,是在商品输出的同时,输出我们的审美和价值观,输出中国的生活方式”过去三年,正是国货品牌蓬勃发展的三年,国潮当道,老字号复兴,国货。