FED55. 点击按钮隐藏元素
描述
请补全JavaScript代码，实现一个盒子的关闭按钮功能。HTML/CSS/JavaScript 解法, 执行用时: 1687ms, 内存消耗: 77836KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n .box {\n width: 100px;\n height: 100px;\n border: solid 1px black;\n /*补全代码*/\n position:relative;\n }\n .btn{\n width: 20px;\n height: 20px;\n background-color: red;\n /*补全代码*/\n position:absolute;\n right:-10px;\n top:-10px;\n text-align:center;\n line-height:20px;\n }\n </style>\n </head>\n <body>\n\n <div class='box'>\n <div class='btn'>X</div>\n </div>\n\n <script type=\"text/javascript\">\n var btn = document.querySelector('.btn');\n var box = document.querySelector('.box');\n btn.onclick = function(){\n // 补全代码\n box.style.display = \"none\"\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1692ms, 内存消耗: 77856KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n .box {\n width: 100px;\n height: 100px;\n border: solid 1px black;\n /*补全代码*/\n position:relative;\n }\n .btn{\n width: 20px;\n height: 20px;\n background-color: red;\n /*补全代码*/\n line-height:20px;\n text-align:center;\n position:absolute;\n right:-10px;\n top:-10px;\n cursor:pointer;\n }\n </style>\n </head>\n <body>\n\n <div class='box'>\n <div class='btn'>X</div>\n </div>\n\n <script type=\"text/javascript\">\n var btn = document.querySelector('.btn');\n var box = document.querySelector('.box');\n btn.onclick = function(){\n // 补全代码\n box.style.display = 'none';\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1698ms, 内存消耗: 77844KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n .box {\n width: 100px;\n height: 100px;\n border: solid 1px black;\n /*补全代码*/\n position: relative;\n }\n .btn{\n position: absolute;\n right: -10px;\n top: -10px;\n width: 20px;\n height: 20px;\n background-color: red;\n /*补全代码*/\n text-align: center;\n line-height: 20px;\n }\n </style>\n </head>\n <body>\n \n <div class='box'>\n <div class='btn'>X</div>\n </div>\n \n <script type=\"text/javascript\">\n var btn = document.querySelector('.btn');\n var box = document.querySelector('.box');\n btn.onclick = function(){\n // 补全代码\n box.style.display = 'none'\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1698ms, 内存消耗: 77876KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n .box {\n width: 100px;\n height: 100px;\n border: solid 1px black;\n /*补全代码*/\n position:relative;\n \n \n }\n .btn{\n width: 20px;\n height: 20px;\n background-color: red;\n /*补全代码*/\n position:absolute;\n top:-10px;\n right:-10px;\n line-height:20px;\n text-align:center\n \n }\n </style>\n </head>\n <body>\n\n <div class='box'>\n <div class='btn'>X</div>\n </div>\n\n <script type=\"text/javascript\">\n var btn = document.querySelector('.btn');\n var box = document.querySelector('.box');\n btn.onclick = function(){\n // 补全代码\n box.style.display='none'\n \n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1701ms, 内存消耗: 77868KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n .box {\n width: 100px;\n height: 100px;\n border: solid 1px black;\n /*补全代码*/\n position:relative;\n }\n .btn{\n width: 20px;\n height: 20px;\n background-color: red;\n /*补全代码*/\n position:absolute;\n text-align:center;\n line-height:20px;\n right:-10px;\n top:-10px;\n }\n </style>\n </head>\n <body>\n\n <div class='box'>\n <div class='btn'>X</div>\n </div>\n\n <script type=\"text/javascript\">\n var btn = document.querySelector('.btn');\n var box = document.querySelector('.box');\n btn.onclick = function(){\n // 补全代码\n box.style.display = \"none\";\n }\n </script>\n </body>\n</html>","libs":[]}