编辑
核心代码
<!-- * @Author: yaojian66 1327629137@qq.com * @Date: 2022-06-27 16:36:02 * @LastEditors: yaojian66 1327629137@qq.com * @LastEditTime: 2022-06-27 16:43:36 * @FilePath: \geyao\第七十四题.点击隐藏按钮.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击隐藏按钮</title> <style type="text/css">.box { width: 100px; height: 100px; border: solid 1px black; /*补全代码*/ position: relative; } .btn { width: 20px; height: 20px; background-color: red; /*补全代码*/ text-align: center; line-height: 20px; position: absolute; right: -10px; top: -10px; } .hidden { display: none; } </style> </head> <body> <div class='box'> <div class='btn'>X</div> </div> <script>var btn = document.querySelector('.btn'); var box = document.querySelector('.box'); btn.onclick = function(){ // 补全代码 box.className = "hidden"</script> </body> </html>
