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

时间：2023-03-10 06:04:22
【前端】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>

相关文章