前端面试题 - 综合练习

点击按钮隐藏元素

请补全JavaScript代码，实现一个盒子的关闭按钮功能。
要求：

使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
使类为"btn"的div元素中内容"X"垂直水平居中
点击"X"按钮可以使类为"box"的div元素隐藏

 <!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;
                top:-10px;
                right:-10px;
                display:flex;
                justify-content:center;
                align-items: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');
            btn.onclick = function(){
                // 补全代码
                box.style.display='none'
            }
        </script>
    </body>
</html>

posted @ 2021-11-23 01:22 zc-lee 阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

前端面试题 - 综合练习

前端面试题 - 综合练习

点击按钮隐藏元素

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!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;
	top:-10px;
	right:-10px;
	display:flex;
	justify-content:center;
	align-items: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');
	btn.onclick = function(){
	// 补全代码
	box.style.display='none'
	}
	</script>
	</body>
	</html>