隐藏元素 |HTML/css

最新推荐文章于 2024-05-03 14:55:36 发布

mosherk

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量141

点赞数 1

分类专栏： HTML/css 文章标签： html css

本文链接：https://blog.csdn.net/wilix/article/details/119394533

版权

HTML/css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

隐藏元素的几种方法

一、display：none
隐藏元素，并影响布局，相当是将这个元素删除了
二、visibility：hidden
隐藏元素，但不影响布局，也不会触发该元素已经绑定的事件
三、opacity：0
隐藏元素，不影响布局，但已绑定的事件仍然可以触发，如click事件

<style>
        .display {
            display: none;
        }

        .visibility {
            visibility: hidden;
        }

        .opacity {
            opacity: 0;
        }
    </style>
<body>
    <div class="display">我是一只小毛驴</div>
    <div>我是一只小毛驴2号</div>
    <div class="visibility" onclick="but3()">我是一只小毛驴3号</div>
    <div>我是一只小毛驴4号</div>
    <div class="opacity" onclick="but5()">我是一只小毛驴5号</div>
    <div>我是一只小毛驴6号</div>

    <script>
        function but3() {
            alert('我是小毛驴3号')
        }
        function but5() {
            alert('我是小毛驴5号')
        }
    </script>
</body>