用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 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。
若有不足请多多指教!希望给您带来帮助!