css偏方:你有几种方法让DOM消失?

作者: MD纸一张 | 来源:发表于2016-07-23 17:33 被阅读398次

为啥会有这么个问题?

其实这是我在某次面试前端实习生时候遇到的一个问题,面试官说你有多少种让DOM隐藏的方法,能说多少说多少,当时脑抽,因为是“能说多少说多少”就觉得那肯定有好多,总结一下当时想出来的“偏方”。

回答:

  1. display: none;
  2. visibility: hidden;

两者不同:如果设置 display:none,将隐藏整个元素,如果设置 visibility:hidden,元素的内容将不可见,但元素仍保持原来的位置和大小。

思来想去既然是隐藏,我是不是还可以说 opacity:0;,问了一下这个答案行不行,他说行,还有吗?

当然有:

设置position为position:absolute或fixed,可以通过z-index遮掩。

设置父元素为 overflow:hidden,将想要隐藏的元素移出父元素范围。

通过css的clip属性,将DOM裁剪。

通过css的transform属性

a. transform: skew(90deg) 拉伸90度,当然不一定是90
b. transform: scale(0) 缩放到0
c. transform: rotateX(90deg) 当然角度不一定是90,也不一定是沿x轴

=。=面试完之后我就去群里边问了一下,大部分人说的答案都是display: none;visibility: hidden;斗胆猜测一下这两个应该是面试官想要的答案。

偏方的使用

虽然答案可能就这两个,但是我还是有用到过我的“偏方”去做隐藏元素,

我遇到的情况是,我需要为DOM元素做一个fadeout+fadein的动画,元素带有click事件,fadeout之后只是opacity为0,然后就有了 元素隐藏了之后点击事件还存在 这个bug。

当然解决方案有很多,可以通过js,也可以通过css,css可以通过延时+transform来做,也算是我的偏方吧,可能解决方案并不完美,望留言指教。

当然这只是一些自己瞎琢磨出来的方法,希望有和我一样爱闹腾的同学补充一下下,也希望大神见到后不吝指教,感激不尽。

相关文章

  • css偏方:你有几种方法让DOM消失?

    为啥会有这么个问题? 其实这是我在某次面试前端实习生时候遇到的一个问题,面试官说你有多少种让DOM隐藏的方法,能说...

  • Jquery对象---Jquery API (2)

    一、css() 方法 Jquery API为DOM添加样式有两种写法:(1)$("div").css('borde...

  • js实现vue组件打印,选择内容不打印

    js方法,获取dom,用windows方法来打印。 css方法 不需要打印的用css样式来标记no-print使用...

  • css让容器水平垂直居中你有几种方法

    用css让一个容器水平垂直居中;知道几种?这种方法比较多,本文总结其中的几种,以便加深印象。效果图都为这个: 方法...

  • iOS11导航栏返回键适配

    iOS11后设置返回键文字消失方法失效了 网上偏方太多了,我这写下我的偏方吧在导航栏控制器中重写push方法

  • angular 学习记录(二)

    内置指令 1.1 ngIf 接收一个布尔值,并据此让一整块DOM树出现或者消失ngIf 指令并不是使用css来...

  • css之DOM元素左右垂直居中

    对于DOM居中大家都不陌生,几乎开发pc或者移动端多会遇到这个问题,但是css对DOM居中是有很多种方法的,下面我...

  • 正确除甲醛方法

    网上流传很多除甲醛的方法,都是一些“偏方”只能清新空气的作用,并不能达到除甲醛的作用,网上主要有以下几种“偏方”不...

  • 深入浏览器渲染

    整体流程 解析 HTML,构建 DOM 树 解析 CSS, 生成 CSS 规则 合并 DOM 树和 CSS 规则,...

  • CSS垂直居中,你会多少种写法?

    CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。  谈及HTML元素居中展...

网友评论

    本文标题:css偏方:你有几种方法让DOM消失?

    本文链接:https://www.haomeiwen.com/subject/tnidjttx.html