关于CSS隐藏界面元素的几种方法

最新推荐文章于 2024-06-08 11:00:00 发布

RunHio

最新推荐文章于 2024-06-08 11:00:00 发布

阅读量260

点赞数

分类专栏：学习笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_45925906/article/details/114880927

版权

学习笔记专栏收录该内容

49 篇文章 1 订阅

订阅专栏

关于CSS隐藏界面元素的几种方法

opacity
visibility
display

opacity

这种方法是通过将页面上的元素设置为透明来进行一个隐藏，隐藏之后的元素仍然占据着原来的位置并且能够进行交互，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 300px;
            height: 100px;
            border: 1px solid black;
            /*第一种隐藏方法,可以占据位置并且进行交互 */
            opacity: 0;
        }
        .div2{
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="div1">
          div1  
    </div>
    <br>
    <div class="div2">
        div2
    </div>
    <script type="text/javascript">
        var el=document.getElementsByClassName("div1")[0]
        el.onclick=function(){
            console.log("点击div1触发事件")
        }
    </script>
</body>
</html>

隐藏前
在这里插入图片描述
隐藏后

visibility

这种方法和前面的opacity比较类似，隐藏之后的元素仍然占据着原来的文档位置，但是不具备交互功能

 .div1{
            width: 300px;
            height: 100px;
            border: 1px solid black;
            visibility: hidden;
        }

display

这种方法相当于把元素从页面上完全移除，即不能占据原来的位置，也不能进行交互

.div1{
            width: 300px;
            height: 100px;
            border: 1px solid black;
           display: none;
        }

RunHio

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS隐藏界面元素的几种方法

关于CSS隐藏界面元素的几种方法opacityvisibilitydisplayopacity这种方法是通过将页面上的元素设置为透明来进行一个隐藏，隐藏之后的元素仍然占据着原来的位置并且能够进行交互，示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
复制链接

扫一扫

专栏目录