码迷,mamicode.com
首页 > Web开发 > 详细

CSS隐藏元素的方法及区别

时间:2019-09-27 23:12:58      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:bsp   gre   script   总结   因此   charset   font   abs   隐藏元素   

1.opacity

opacity:0将元素本身及其子元素都置为不可见的,而元素本身依然占据它自己的位置并对网页的布局起作用,它会响应用户交互。

2.visibility 

visibility:hidden将元素本身及其子元素都置为不可见的,而元素本身依然占据它自己的位置并对网页的布局起作用,它不会响应用户交互。如果想让子元素显示,则设置子元素的visibility:visibility;

3.display

display:none使用这个属性,被隐藏的元素对网页的布局不起作用。不仅如此,一旦display设为none任何对该元素直接的用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

4.position

position:absolute 将top和left设置成足够大的负数,相当于把元素放到可视区域外,它不会影响布局,能够让元素保持可操作性,在读屏软件上可以被识别。

总结一下:opacity,visibility影响布局,前者不影响交互,后者影响交互;

                   display不影响布局,影响交互;

                   position 不影响布局,不影响交互;

下面给出例子:可以自行调试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            width: 200px;  height: 200px;  background-color: #B4B4B4;  opacity:0;
        }
        .div2 {  width: 200px;  height: 200px;  background-color: goldenrod;  visibility: hidden;
        }
        .div2-2 {  width: 100px;  height: 100px;  background-color: lightsalmon;  visibility: visible;
        }
        .div3{  width: 200px;  height: 200px;  background-color: green; display: none;
        }
        .div4 {  width: 200px;  height: 200px;   background-color: greenyellow; position: absolute;  top:-99em;  }
    </style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2<div class="div2-2">2-2</div></div>
<div class="div3">3</div>
<div class="div4">4</div>
<script>
    var div1 = document.querySelector(".div1");
    var div2 = document.querySelector(".div2");
    var div3 = document.querySelector(".div3");
    var div4 = document.querySelector(".div4");
    
    div1.οnclick=function () {
        alert("div2");
    };
    div2.οnclick=function () {
        alert("div2");
    };
    div3.οnclick=function () {
        alert("div3");
    };
    div4.οnclick=function () {
        alert("div4");
    };
</script>
 
</body>
</html>

原文链接:https://blog.csdn.net/wsymcxy/article/details/82735743

5.通过z-index隐藏

 

<style>div{    z-index:-9999;
}</style>


链接:http://www.imooc.com/article/76214
来源:慕课网

 

CSS隐藏元素的方法及区别

标签:bsp   gre   script   总结   因此   charset   font   abs   隐藏元素   

原文地址:https://www.cnblogs.com/psxiao/p/11600750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!