javascript (js)通过button按钮实现盒子的显示和隐藏

前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多

效果图：

点击隐藏后隐藏盒子，同时隐藏按钮的值修改为显示。点击显示后盒子又将显示，显示按钮的值修改为隐藏，如图：

完整代码如下（代码详解）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*div盒子css样式——区分*/div {height: 150px; //高度150pxwidth: 150px;  //宽度150pxbackground-color: yellow; //盒子颜色yellow}</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div><script>//通过button按钮的id获取点击事件document.getElementById("btn").onclick = function () {//使用if判断，判断button按钮的value属性if (this.value === "隐藏") {// 如果是隐藏，那么点击后通过div盒子的id修改css样式，将display属性值改为nonedocument.getElementById("dv").style.display = "none";//this关键字获取的是当前对象  通过this关键字来修改button的value值this.value = "显示";} else if (this.value === "显示") {// 如果是显示，那么点击后通过div盒子的id修改css样式，将display属性值改为blockdocument.getElementById("dv").style.display = "block";//this关键字获取的是当前对象  通过this关键字来修改button的value值this.value = "隐藏";}};
</script>
</body>
</html>

文字叙述不太严谨，请包容

如有问题，欢迎留言指出，谢谢

javascript (js)通过button按钮实现盒子的显示和隐藏相关推荐

Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
JS实现密码框小眼睛的显示与隐藏(使用字体图标)
JS实现密码框小眼睛的显示与隐藏(使用字体图标) 前端学习路上的小练习,如若不喜,请勿喷. 眼睛使用的是 iconfont 阿里矢量图标库的内容链接:https://www.iconfont.cn/ ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...
video的使用,及修改播放按钮进度条的显示与隐藏
配置及属性小demo 该配置去除了播放进度条去除了画中画播放进度下载功能具体配置可参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/E ...
jquery-通过按钮控制模态的显示与隐藏
起点素材: https://cloud.189.cn/t/VVZr2qqYriey (0817-蒙态框) 终点素材: https://cloud.189.cn/t/rIRBzeqMVn2m(访问码:6 ...
用H5和CSS如何实现鼠标触碰一个盒子后显示下面隐藏的盒子
只用H5和CSS较简洁的实现这个效果是有一定难度的,下面提供两种实现思路: 第一种:定位覆盖法: 顾名思义,这个方法需要用到CSS定位属性(position),被覆盖的盒子称为A盒,用来覆盖的盒子称为 ...
js实现密码输入框点击小眼睛显示或隐藏密码
登录页密码框加密输入不知道对错,加个小眼睛方便查看和修改,下面是小眼睛效果图,如果不喜欢这个图标可以自己去阿里图标库自己选择下载. html代码(因为只把密码输入框展示出来了,所以样式自行调整,只给你 ...
当前端点击button按钮时可以向PHP后端传值，并获得返回的结果
1.新建test_click.php,在test_click.php中需要引入jquery.min.js,Button按钮中的onclick绑定的事件为clickCallBack()函数,clickC ...
JS file图片即选即得显示,前端交互图片即选即得
<table><tr><td><input type="file" name="sdfFile" id="s ...

javascript (js)通过button按钮实现盒子的显示和隐藏

前奏：无论是实现div或其他内容的显示和隐藏，原理都差不多

效果图：

如有问题，欢迎留言指出，谢谢

javascript (js)通过button按钮实现盒子的显示和隐藏相关推荐

最新文章

热门文章