首页 > 其他分享 >前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮

前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮

时间:2023-11-08 17:38:00浏览次数:46  
标签:box 补全 第七十三 歌谣 按钮 div btn 刷题


 

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

请补全JavaScript代码,实现一个盒子的关闭按钮功能。
要求:
1. 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
2. 使类为"btn"的div元素中内容"X"垂直水平居中
3. 点击"X"按钮可以使类为"box"的div元素隐藏

前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮_补全

前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮_css_02编辑

 核心代码

<!--
 * @Author: yaojian66 [email protected]
 * @Date: 2022-06-27 16:36:02
 * @LastEditors: yaojian66 [email protected]
 * @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>

前端歌谣的刷题之路-第七十三题- 点击按钮隐藏按钮_补全_03

总结

直接设置好样式 当点击的时候 设置为dispaly:none nice


标签:box,补全,第七十三,歌谣,按钮,div,btn,刷题
From: https://blog.51cto.com/u_14476028/8256756

相关文章

  • 前端歌谣的刷题之路-第七十四题-直角三角形
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 解锁表单新操作!JVS低代码表单自定义按钮功能全解析
    在普通的表单设计中,虽然自带的【提交】、【重置】、【取消】按钮可以满足基本操作需求,但在面对更多复杂的业务场景时,这些按钮的显示控制就显得有些力不从心。为了更好地满足用户在表单操作过程中的个性化需求,JVS低代码推出了表单自定义按钮功能。这项功能不仅可以更灵活地操作表单......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-25-处理单选和多选按钮-中篇
    1.简介上一篇中宏哥讲解和介绍的单选框有点多,而且由于时间的关系,宏哥决定今天讲解和分享复选框的相关知识。2.什么是单选框、复选框?单选按钮一般叫raidobutton,就像我们在电子版的单选答题过程一样,单选只能点击一次,如果点击其他的单选,之前单选被选中状态就会变成未选中。单......
  • GridView中的更新按钮不能触发RowUpdating事件
    当点击“编辑”按钮以后,可以看到“更新”和“取消”按钮,“取消”按钮可以正常触发RowCancelingEdit事件,但是“更新”按钮不能触发RowUpdating事件。解决方案:在<asp:CommandField>中添加CausesValidation="false"。 GridviewRowUpdatingNotFiring(RowUpdatingeventnotfirin......
  • GridView根据某行的内容显示或隐藏Edit按钮
     ProtectedSubgdv_RowDataBound(ByValsenderAsObject,ByValeAsGridViewRowEventArgs)Handlesgdv.RowDataBoundIfe.Row.RowType=DataControlRowType.DataRowThenIfCType(e.Row.FindControl("lblVerifiedBy"),Label).T......
  • bitsdojo_window自定义导航以及关闭按钮
    1、Windows里面的配置在应用程序文件夹中,转到windows\runner\main.cpp,并在文件开头添加以下两行:#include<bitsdojo_window_windows/bitsdojo_window_plugin.h>autobdw=bitsdojo_window_configure(BDW_CUSTOM_FRAME|BDW_HIDE_ON_STARTUP);2、macOS里面的配置1、在应用程......
  • 项目中难点-页面点击“取消”按钮实现无感刷新--reload
    1、在App.vue页面中注册provide中定义reloadprovide(){return{reload:this.reload}} 2、在App.vue页面中的methods中定义方法reload目的通过控制router-view的显示与隐藏进行重新加载页面,实现无感刷新。reload(){this.isRouterAlive=falsethis.$next......
  • elementUI确认消息弹框区分取消和关闭按钮
    预期效果:说明:默认情况下,elementUI的确认消息弹框中取消按钮和右上角关闭按钮,走的是同一个方法,也就是catch方法的回调,如果项目中有区分,默认的是无法支持的。所以要重新配置一下,话不多说,上代码://res.msg表示提示信息内容this.$confirm(res.msg,'提示',{con......
  • 算法刷题记录-螺旋矩阵
    算法刷题记录-螺旋矩阵螺旋矩阵给你一个正整数n,生成一个包含1到n2所有元素,且元素按顺时针顺序螺旋排列的nxn正方形矩阵matrix。示例1:输入:n=3输出:[[1,2,3],[8,9,4],[7,6,5]]示例2:输入:n=1输出:[[1]]思路,这题有点绕,我用了一个比res大2的布尔矩阵来存储......
  • 在ASP.NET MVC框架中,如何处理多个提交按钮?
    内容来自DOChttps://q.houxu6.top/?s=在ASP.NETMVC框架中,如何处理多个提交按钮?在ASP.NETFrameworkBeta中,有几种方法可以处理同一表单中的多个提交按钮。一种方法是使用一个隐藏字段来区分不同的提交按钮。例如:<%Html.BeginForm("MyAction","MyController",FormMethod......