css隐藏元素的六种方法

最新推荐文章于 2024-03-05 13:32:49 发布

muzidigbig

最新推荐文章于 2024-03-05 13:32:49 发布

阅读量1.1w

点赞数 11

分类专栏： css 文章标签： css隐藏元素 display:none visibility:hidden opcity:0

本文链接：https://blog.csdn.net/muzidigbig/article/details/80967143

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

用css隐藏页面元素有许多种方法：

display:none (通过隐藏盒子属性，脱标)
visibility:hidden (通过隐藏盒子属性，不脱标)
opacity:0 (通过改变元素的透明度，不脱标)
position:absolute (通过定位将元素定到远离页面的位置，脱标)
cli-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px) (通过裁剪盒子，不脱标)
position:absolute;与clip:rect(0px 0px 0px 0px)配合 (通过裁剪绝对定位的盒子，脱标)

visibility、display、opacity三者区别：

隐藏后是否占据原有空间
display：none ，不占据空间，页面重新渲染
visibility：hidden，占据空间，不能触发点击事件
opacity：0 ，占据空间，仍可触发点击事件
性能
display：none 引起页面回流与重绘，性能消耗大
visibility：hidden 只造成本元素的重绘，性能消耗较少
opacity：0 只造成本元素重绘，性能消耗较少

这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的
继承
display：none和opacity：0 非继承属性，修改子孙节点属也无法显示

visibility：hidden 是继承属性，子孙节点由于继承了visibility：hidden才不显示，通过设置子节点visibility：visible就可以让子孙节点显示出来。
css3动画transition支持性
transition不支持display属性
transition动画支持opacity或者visibility属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏元素的方式</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
            line-height: 200px;
        }
        .hidd{
            position: absolute;
            top:-10000px;
            left: -10000px;
        }
        .clip{
            clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
        }
        .poclip{
            position: absolute;
            clip:rect(0px,0px,0px,0px);
        }
    </style>
</head>
<body>
<button onclick="change1()">display隐藏</button>
<button onclick="change2()">visibility隐藏</button>
<button onclick="change3()">opacity隐藏</button>
<button onclick="change4()">position隐藏</button>
<button onclick="change5()">cli-path隐藏</button>
<button onclick="change6()">clip隐藏</button>
<div class="box  ">
    <span>https://blog.csdn.net/muzidigbig/</span>
</div>
<p>我对你开过的玩里面，藏着我想对你说不出的秘密。</p>

</body>

<script >
    function change1() {
        var box = document.getElementsByClassName('box')[0];
        //隐藏之后不占据原来的位置(脱标)
        box.style.display = 'none';
    }
    function change2() {
        var box = document.getElementsByClassName('box')[0];
        //隐藏之后还占据原来的位置(不脱标)
        box.style.visibility = 'hidden';
    }
    function change3() {
        var box = document.getElementsByClassName('box')[0];
        //通过改变透明度来隐藏(不脱标)
        box.style.opacity = '0';
    }
    function change4() {
        var box = document.getElementsByClassName('box')[0];
        //定位(脱标)
        box.className += 'hidd'
    }
    function change5() {
        var box = document.getElementsByClassName('box')[0];
        //通过裁剪元素(不脱标)
        box.className += 'clip'
    }
    function change6() {
        var box = document.getElementsByClassName('box')[0];
        //通过裁剪与定位(脱标)
        box.className += 'poclip'
    }
</script>
</html>

知识补充：

定义和用法

clip 属性剪裁绝对定位元素。

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

若有不足请多多指教！希望给您带来帮助！

muzidigbig

关注

11
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
css隐藏元素的六种方法

用css隐藏页面元素有许多种方法：display:none (通过隐藏盒子属性，脱标)visibility:hidden(通过隐藏盒子属性，不脱标)opacity:0 (t)(通过改变元素的透明度，不脱标)position:absolute(通过定位将元素定到远离页面的位置，脱标)cli-path:polygon(0px 0px , 0px 0px,0px 0p...
复制链接

扫一扫