CSS Ribbon

Reproducing the GitHub Ribbon in CSS

【前端】CSS隐藏元素的方法和区别

CSS隐藏元素的方法和区别

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">


    </style>
</head>
<body>
    <button id="btn" onclick="cl()">
        点我
    </button>
</body>
<script type="text/javascript">
    var flag = true;
    function cl() {

        if(flag){
            //visibility是隐藏了元素(保留了原来的占位),并且不能再交互
            document.getElementById('btn').style.visibility = 'hidden';
            //display是从html去除了元素,不再占位,更别提交互的事
            document.getElementById('btn').style.display = 'none';
            //opacity就是骗你的,你看上不见是因为隐形了,其实它还在那里,不离不弃(占位且不影响交互)
            document.getElementById('btn').style.opacity = 0;
            flag = false;
        }else{
              document.getElementById('btn').style.visibility = 'visible';
              document.getElementById('btn').style.display = 'block';
              document.getElementById('btn').style.opacity = 1;
              flag = true;
        }


    }

</script>
</html>
View Code
复制代码

 

posted on   pandaboy1123  阅读(940)  评论(0编辑  收藏  举报

编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示