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

发布时间:2020-04-09 22:04:36 作者:蜗牛oscersong
来源:网络 阅读:2094

(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>

效果图:

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

   此例子中,第二个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>

效果图:

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

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

     

.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>

效果图:

   display,opacity,visibility,position隐藏元素的实质 display,opacity,visibility,position隐藏元素的实质此例中,当鼠标移近第二个div时,div的visibility属性变为visible,并为之绑定点击事件。

(4)Positionposiition: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隐藏元素的实质

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

推荐阅读:
  1. visibility和display有什么区别
  2. 通过display或visibility如何实现HTML元素的显示与隐藏

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js display 隐藏元素

上一篇:【cocos2d-x从c++到js】06:Google的继承写法解析

下一篇:自建个人原创站运维网咖社(www.net-add.com)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》