display:none与visible:hidden区别

时间:2021-08-30 18:22:25

if(list.style.display=='none'){
          
     list.style.display='block';
          
 }else{
          
     list.style.display='none';
            }
这里的none是查询不到的
alert(
list.style.display)为空值,加了display:none的元素师从文档流中删除了,所以查询不到,

这里要换个思路
if(list.style.display!='block'){
           
    list.style.display='block';
           
}else{
           
    list.style.display='none';
            }
这样就可以了。

display:none与visible:hidden区别在于  前者是从文档中删除,占据的空间也随之消失,而后者仅仅是隐藏,不会去除所占据的空间,。

在占据空间上,absolute与relative情况和上面相似

感谢学妹(Adeline)的科普。