CSS中除了display:none以外，可以隐藏页面元素的几种方法

 

CSS中除了display:none以外，可以隐藏页面元素的几种方法

2018年09月17日 23:04:16 Benjamin920813 阅读数：78 标签： css前端元素displayvisibility

CSS中除了display:none以外，可以隐藏页面元素的几种方法

display：none

display:none是我们最常用的隐藏页面元素的方法，使用display:none方法隐藏的页面元素，应该算是真正意义上的隐藏，因为它使元素完全不占空间，连盒模型也不生成，任何基于该元素的用户交互操作也不会起作用，并且读屏软件也读不到它，一旦某个页面元素被设置了display:none的属性后，该元素的子孙元素也会被隐藏，效果等同于该元素，此外，为display:none添加动画过渡效果也是无效的，它的任何不同状态值之间的切换总是会立即生效。
不过我们可以通过常用的DOM操作方法访问到该元素，就跟其他未被隐藏的元素一样，例如$(“”)等

Visibility

将元素的Visibility的属性值设置成hidden也可以达到隐藏元素的效果，但是他区别于display:none的地方是该元素依然会在页面布局起作用，它仍然占据着它原来的空间。不过他并不影响任何交互操作，读屏软件也能读到它，不过也是隐藏的，被设置visibility:hidden的元素也能够实现动画效果，只要保证开始跟结束的状态不一样就行，这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的，我们可以利用这一点来实现元素的延迟显示跟隐藏。但是opacity 属性可以用来实现一些效果很棒的动画。任何 opacity 属性值小于 1 的元素也会创建一个新的堆叠上下文（stacking context）；visibility与display:none不同的地方还在于被设置visibility:hidden的元素的子孙元素若是被设置成visibility: visible;的话，那么该元素就是可见的，但是display:none则不同，即使它的子孙元素被设置成display:block，该子孙元素也是不可见的。

Opacity

Opacity属性用于设置元素的透明度，当我们设置Opacity的值为0时，该元素就会被隐藏，但它仍会在页面布局中起作用，但是他会影响部分页面交互操作，读屏软件能读到该元素，但是读到的状态并不会是隐藏的，跟不透明时是一样的效果

Position

有些时候，我们可能会遇到这样一种情况，我们希望某个元素能够不影响我们的页面布局，但是我们又想与之交互，这种情况下opacity 和 visibility会 影响布局， display 不影响布局但又无法直接交互，所以以上这三种都不能满足这种需求，这时候我们就可以使用Position这个属性将元素移出可视区域，这样既不会影响布局，又能让元素可以操作。不过我们要避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换问题。这个方法在创建自定义复选框和单选按钮时经常被使用。

 

Position 设置：

1、元素默认隐藏，显示在用户的不可见区域内，则代表隐藏

<div class="downTips" style="position: absolute;top: -9999px;left: -9999px;"></div>

2、恢复元素的默认位置

<script type="text/javascript">

$('.downTips').css({ position:"absolute" , top:+9999, left:+9999});
$('.downTips').css("position","static");

</script>

以上步骤，可实现隐藏展示某个元素