css隐藏元素的六种方法

最新推荐文章于 2023-06-03 17:56:54 发布

刺心疯

最新推荐文章于 2023-06-03 17:56:54 发布

阅读量575

点赞数

分类专栏：前端面试题

本文链接：https://blog.csdn.net/qq_42363090/article/details/93470304

版权

前端面试题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css隐藏元素的六种方法

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

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

<!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 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

可能的值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect(top,right,botom,left)
auto	默认值。不应用任何剪裁
inherit	规定应该从父元素继承clip属性的值

刺心疯

关注

0
点赞
踩
2

收藏

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

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

扫一扫