zoukankan html css js c++ java

【前端】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

Win a contest, win a challenge

查看全文

相关阅读:
markdown基本语法
 每天一个Linux命令：pwd(3)
每天一个Linux命令：cd(2)
每天一个Linux命令：ls(1)
每天一个Linux命令：man(0)
maven命令行创建项目问题
 Regular Expression
JS事件流
 canvas与svg区别
 js调试

原文地址：https://www.cnblogs.com/pandaboy1123/p/9547946.html