display,opacity,visibility,position隐藏元素的实质
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display,opacity,visibility,position隐藏元素的实质相关的知识，希望对你有一定的参考价值。
（1）display:设置属性display:none；,该元素被隐藏，而且该元素的子孙后代也被同时隐藏，此时被隐藏的元素不占据任何空间，用户的交互操作在此元素上不能生效，但是通过js语句操作dom可以来操作该隐藏元素。
实例：
.display-hide {
display: none;
transition: all ease 0.8s;
}
.display-hide:hover { /* 当鼠标悬浮在该元素时，设置为block,此时元素也不会出现 ，因为被display隐藏的元素，不占据任何空间，用户的交互操作也不能生效*/
display: block;
}
.display-hide p {/* 同样的隐藏元素的子孙后代元素也会被隐藏，即使后代元素属性设置为block */
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>鼠标移近来，然后在点击有惊喜哦</div>
<div class="display-hide"><p>0</p></div>
<div>第三个div块</div>
<script>
var count = 0;
var DHide = document.getElementsByClassName(‘display-hide‘);
var Div = 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；，只是从视觉的角度隐藏了该元素，而该元素本身还是占据页面中的布局，而且，这种隐藏会响应用户的交互。
实例：
<style>
div {
padding: 60px;
width: 60px;
font-size: 14px;
background: pink;
text-align: center;
margin: 1%;
float: left;
cursor: pointer;
}
/* 该元素虽然被隐藏了，看不见了，但它在页面中的位置还是存在的 */
.opacity-hide {
opacity: 0;
transition: all ease 0.8s;
}
/* 当鼠标移动到这个隐藏元素上面，元素显示，此时响应了用户的交互行为 */
.opacity-hide:hover {
opacity: 1;
}
</style>
</head>
<body>
<div>1</div>
<div class="opacity-hide">2</div>
<div>3</div>
</body>效果图：
此例中第二个div被隐藏了，我们看不见了，但是它在页面中的位置还是存在着，对用户的操作还是会做响应的，当鼠标滑动到第二块div时，显示。
（3）visibility：设置属性visibility:hidden;,该元素被隐藏，同样隐藏的元素对页面的布局仍起作用，但它不会影响任何用户交互，而且它的子孙元素也会在设置为visibility：visible。
.visibility-hide {
visibility: hidden;
transition: all ease 0.8s;
}
/* 虽然设置了隐藏效果，但是不会影响用户的交互操作 */
.visibility-hide:hover {
visibility: visible;
}
/* 父元素被隐藏了，这时设置子元素为显示状态，此时子元素显示，但父元素不会显示 */
.visibility-hide p {
visibility: visible;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>1</div>
<div class="visibility-hide"><p id="visi-p">2</p></div>
<div>3</div>
<script>
var oHide = document.getElementsByClassName(‘visibility-hide‘);
var oHideP = document.getElementById(‘visi-p‘);
var count = 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>
<div class="position-hide"><p>0</p></div>
<div><input type="radio" value = "获得焦点">3</div>
<script>
var count = 0;
var oHide = document.getElementsByClassName(‘position-hide‘);
var Div = document.getElementsByTagName(‘div‘);
var input = 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，这四种元素隐藏元素各有优缺点，在实际的使用中根据需要，选择合适的。
本文出自 “梦想需要坚持” 博客，请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1793123
以上是关于display,opacity,visibility,position隐藏元素的实质的主要内容，如果未能解决你的问题，请参考以下文章
关于 transparent rgba display:none; opacity visiblity 关于em
display,opacity,visibility,position隐藏元素的实质
display:none opacity:0以及visibility:hidden的区别
转 opacity() 和 rgba() 的区别？display 和 visibility 有什么不同？