CSS中除了display：none以外，可以隐藏页⾯元素的⼏种⽅
法
CSS中除了display:none以外，可以隐藏页⾯元素的⼏种⽅法
2018年09⽉17⽇ 23:04:16  阅读数：78 标签：
CSS中除了display:none以外，可以隐藏页⾯元素的⼏种⽅法
css中的position属性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" ></div>
2、恢复元素的默认位置
<script type="text/javascript">
$('.downTips').css({ position:"absolute" , top:+9999, left:+9999});
$('.downTips').css("position","static");
</script>
以上步骤，可实现隐藏展⽰某个元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。