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