css隐藏元素的六种方法

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

  1. display:none    (通过隐藏盒子属性,脱标)
  2. visibility:hidden     (通过隐藏盒子属性,不脱标)
  3. opacity:0    (t)    (通过改变元素的透明度,不脱标)
  4. position:absolute     (通过定位将元素定到远离页面的位置,脱标)
  5. cli-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px)    (通过裁剪盒子,不脱标)
  6. 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 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。





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

猜你喜欢

转载自blog.csdn.net/muzidigbig/article/details/80967143