块元素的隐藏和展示display属性 - ellaha

CSS display 属性：https://www.w3school.com.cn/cssref/pr_class_display.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-image: url('img/1.jpg');
            background-repeat:no-repeat;
            background-size: cover;
    }
        .show {
            display: block;
        }
        .hidden {
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
            isShow = true;
            btn.onclick = function () {

                if (isShow) {
                    box.className = 'hidden';
                    btn.value = '显示';
                    isShow = false;
                } else {
                    box.className = 'show';
                    btn.value = '隐藏';
                    isShow = true;
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="隐藏" id="btn"><br>
<div id="box">
    
</div>


</body>
</html>

posted on 2021-03-16 17:24 ellaha 阅读(155) 评论(0) 收藏举报

刷新页面返回顶部