×

这些隐藏元素的方法,您都知道吗?

作者:Terry2016.06.17来源:Web前端之家浏览:11945评论:3
关键词:隐藏

ad.jpg

谈到元素隐藏,最先想到的应该是display:none,其次是设置透明为0,再就是......

不知道各位是否也是这样的想法,据我所了解,CSS隐藏元素的方法大概有5种,在用法方面各有“千秋”吧,下面就介绍下:

No.1 Display

如果设置display:none确保元素不可见并且连盒模型也不生成。当然被隐藏的元素不占据任何空间。不仅如此,一旦设置display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式 产生的效果就像元素完全不存在。

.hid{display:none}

任何这个元素的子元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。

说明:通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它,就像操作其他的元素。希望能提醒大家。

No.2 Opacity

opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这意味着将opacity设为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。

.hid{opacity:0;filter:alpha(opacity=0)}

说明:虽然opacity隐藏不能完全隐藏,但它在我们处理动画时,是很有常用的哟~~

No.3 Visibility

当我们设置visibility:hidden后,将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏。这个属性也能够实现动画效果,只要它的初始和结束状态不一样。这确保了visibility状态切换之间的过渡动画可以是时间平滑的

.hid{visibility:hidden}

说明:如果一个元素的visibility被设置 hidden,同时想要显示它的某个子元素,只要将那个元素的visibility显式设置为visible即可。这种方法可以用于“伪对象清除浮动”,也可以实现简单的菜单下拉效果等。先前有介绍过菜单下拉效果的应用,可以戳下这个连接:CSS下拉导航菜单制作方法

说明:虽然不支持IE6,但是IE6已经快绝种了,o(∩_∩)o 。

No.4 Position

使用position隐藏元素,无非就是在不影响布局的情况下,使用绝对定位,把元素移出我们可视区域

position:absolute;left:-999em;top:-999em

说明:这个比较简单,就不啰嗦了。

No.5 Clip-path

这种方法也是我最近才开始了解的,它是通过裁剪来实现元素的隐藏。这种方法很少用,在以前,这可以通过clip属性来实现,但是这个属性被废弃了,换成一个更好的属性叫做 clip-path。代码如下

.hid{clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px)}

如果你把鼠标悬停在第一个元素上,它依然可以影响第二个元素,尽管第二个元素已经通过clip-path隐藏了。如果你点击它,它会移除用来隐藏class,让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取,许多WordPress 站点使用clip-path或者之前的clip来实现专门为读屏软件提供的文字。

虽然我们的元素自身不再显示,它也依然占据本该占据的矩形大小,它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域 之外也不可能生效。在我们的例子里,剪裁区大小为零,这意味着用户将不能与隐藏的元素直接交互。此外,这个属性能够使用各种过渡动画来实现不同的效果。

说明:clip-path属性还没有在IE或者Edge下被完全支持,如果要在你的clip-path中使用外部的SVG文件,浏览器支持度还要更低,所以现在还常用,我们可以了解下即可了。

总结

上面5种方法,在不同情况下有着不同的用途。不过有一点要说下:上面的隐藏方法,表面是上是隐藏了,但是浏览器还是会加载渲染的。如有您有更多的方法,可以留言。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/css-hide-element.html

网友评论文明上网理性发言 已有3人参与

发表评论:

评论列表

  • jay jay  发布于 2016-06-27 09:54:29   回复该评论
  • 感觉应该没有了吧,这个已经很全了。