display,opacity,visibility,position隐藏元素的实质

2025-02-25 技术教程

（1）display:设置属性display:none；,该元素被隐藏，而且该元素的子孙后代也被同时隐藏，此时被隐藏的元素不占据任何空间，用户的交互操作在此元素上不能生效，但是通过js语句操作dom可以来操作该隐藏元素。

实例：

.display-hide{display:none;transition:allease0.8s;}.display-hide:hover{/*当鼠标悬浮在该元素时，设置为block,此时元素也不会出现，因为被display隐藏的元素，不占据任何空间，用户的交互操作也不能生效*/display:block;}.display-hidep{/*同样的隐藏元素的子孙后代元素也会被隐藏，即使后代元素属性设置为block*/display:block;margin:0;padding:0;}</style></head><body><div>鼠标移近来，然后在点击有惊喜哦</div><divclass="display-hide"><p>0</p></div><div>第三个div块</div><script>varcount=0;varDHide=document.getElementsByClassName('display-hide');varDiv=document.getElementsByTagName('div');Div[0].addEventListener("mouseover",function(){count++;DHide[0].innerHTML='<p>'+'你的鼠标移近第一个div：'+count+'次'+'</p>';});Div[0].addEventListener("click",function(){DHide[0].style.display="block";});</script></body>

效果图：

此例子中，第二个div元素被隐藏，于此同时它的子元素p也被隐藏了，当用户有对第二个div有交互行为，此时是不起作用的，但通过js语句可以来操作该元素，使开元素显示。

（2）opacity:设置属性opacity:0；，只是从视觉的角度隐藏了该元素，而该元素本身还是占据页面中的布局，而且，这种隐藏会响应用户的交互。

实例：

效果图：

此例中第二个div被隐藏了，我们看不见了，但是它在页面中的位置还是存在着，对用户的操作还是会做响应的，当鼠标滑动到第二块div时，显示。

（3）visibility：设置属性visibility:hidden;,该元素被隐藏，同样隐藏的元素对页面的布局仍起作用，但它不会影响任何用户交互，而且它的子孙元素也会在设置为visibility：visible。

.visibility-hide{visibility:hidden;transition:allease0.8s;}/*虽然设置了隐藏效果，但是不会影响用户的交互操作*/.visibility-hide:hover{visibility:visible;}/*父元素被隐藏了，这时设置子元素为显示状态，此时子元素显示，但父元素不会显示*/.visibility-hidep{visibility:visible;margin:0;padding:0;}</style></head><body><div>1</div><divclass="visibility-hide"><pid="visi-p">2</p></div><div>3</div><script>varoHide=document.getElementsByClassName('visibility-hide');varoHideP=document.getElementById('visi-p');varcount=oHideP.innerHTML;oHide[0].addEventListener("click",function(){count++;oHideP.innerHTML=count;});</script></body>

效果图：

此例中，当鼠标移近第二个div时，div的visibility属性变为visible,并为之绑定点击事件。

（4）Position：posiition:absolute;

top:-2880px;

Left:-2880px;

通过设置top,left的值，将元素放在屏幕的可视区域外，这样就达到了元素隐藏的效果。

.position-hide{position:absolute;top:-9999px;left:-9999px;}input{position:absolute;top:-2880px;left:-2880px;}/*这个用户效果不会起作用，因为此时的div不在可视区内*/.position-hide:hover{position:static;}</style></head><body><div>点击元素，有惊喜</div><divclass="position-hide"><p>0</p></div><div><inputtype="radio"value="获得焦点">3</div><script>varcount=0;varoHide=document.getElementsByClassName('position-hide');varDiv=document.getElementsByTagName('div');varinput=document.getElementsByTagName('input');Div[0].addEventListener("mouseover",function(){count++;oHide[0].innerHTML='<p>'+'你的鼠标移近第一个div：'+count+'次'+'</p>';});Div[2].addEventListener("click",function(){input[0].style.position="static";});Div[0].addEventListener("click",function(){oHide[0].style.position="static";});</script></body>

效果图：

总结：display,opacity,visibility,position，这四种元素隐藏元素各有优缺点，在实际的使用中根据需要，选择合适的。