题解 | #点击按钮隐藏元素#

点击按钮隐藏元素

https://www.nowcoder.com/practice/9b0016737b3040aaa61316890f1ac3f8

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                /*position: relative;*/

            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                /*position: absolute;*/
                /*right: -10px;*/
                /*top: -10px;*/
                /*line-height: 20px;*/
                                /*text-align: center;*/

            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            box.style.position = 'relative';
            btn.style.position = "absolute";
            btn.style.right = '-10px';
            btn.style.top = '-10px';
            btn.style.lineHeight = '20px';
            btn.style.textAlign = 'center';
            btn.onclick = function(){
                // 补全代码
                                box.style.display = 'none';
                // box.style.visibility = 'hidden';
            }
        </script>
    </body>
</html>

CSS注释的部分实现了

1. 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
2. 使类为"btn"的div元素中内容"X"垂直水平居中

JS注释部分的写法也能实现盒子的关闭功能