隐藏页面元素的常用方法

隐藏页面元素的常用方法

Opacity
将一个元素的opacity的属性值设置为0,也就是将元素设置为完全透明。

  • 元素依然存在页面上,会影响页面布局。
  • 元素绑定的事件依旧可以正常触发,读屏软件会阅读元素中的内容。
  • 属性可继承,子元素也可以通过改动自身的opacity属性值来实现可见。

Visibility
将一个元素的visibility的属性值设置为hidden。

  • 元素依然存在页面上,会影响页面布局。
  • 元素绑定的事件不能正常触发,读屏软件不会阅读元素中的内容。
  • 属性可继承,子元素可以通过将visibility值设为visible来实现可见。

Display
将一个元素的display的属性值设为none。

  • 元素会从页面上完全消失,不会影响页面布局。
  • 元素绑定的事件也不能正常触发,读屏软件也不会阅读元素中的内容。
  • 属性可继承,但是子元素无论怎么修改自身display属性值,也不能实现可见。

absolute
将一个元素的position的属性值设置为absolute(父元素的position的属性值要设置为relative),再将top和left设为一个极大的负值就可以将元素隐藏(相当于把元素移到视窗的外面)。

  • 元素依然存在页面上,但是不会影响页面布局。
  • 元素绑定的时间能正常触发,读屏软件会阅读元素中的内容。
  • 属性可继承(需将position属性值设为inherit),子元素可以通过将position属性设置为relative、position、inherit,再设置top、bottom、right、left的值重新回到页面。

relative
将一个元素的position的属性值设置为relative,再将top和left设为一个极大的负值就可以将元素隐藏(相当于把元素移到视窗的外面)。这个也是通过对元素进行定位的方式来实现隐藏元素的,但是与上面的absolute有一点不同。

  • 元素依然存在页面上,会影响页面布局。
  • 元素绑定的事件能正常触发,读屏软件会阅读元素中的内容。
  • 属性可继承(需将position属性值设为inherit),子元素可以通过将position属性设置为relative、position、inherit,再设置top、bottom、right、left的值重新回到页面。

Clip-path
这种方法由于浏览器兼容问题,使用的不多,这里就不写上去了,有兴趣的可以上网去查询一下。

本文作者:酷酷的二货

本文链接:https://www.n-1.cn/80.html

版权声明:所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常,请留言或者联系博主修复。
最后修改:2019 年 09 月 07 日 02 : 52 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论