javascript实现单按钮显示隐藏元素

已于 2022-11-27 23:51:26 修改
阅读量6.7k 收藏 9
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 html
于 2022-11-16 09:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44001222/article/details/127876807
版权

🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs

🔥🔥🔥email: 337674757@qq.com

🔥🔥🔥前端交流群： 598778642

javascript实现单按钮显示隐藏元素

通过一个按钮，点击消失方块，再次点击出现方块

示例
代码如下：
js部分：

			function fun() {
				let a = document.getElementById('div_1')
				if(a.style.display == 'block'){
					a.style.display = 'none'
				}else{
					a.style.display = 'block'
				}
			}

html部分

	<body>
		<center>
			<div id="div_1" style='display: block;'>
			</div>
			<input type="button" value="点击" id="inp_1" onclick="fun()" />
		</center>
	</body>

需要注意的是要在div内设置display，用于切换属性
还有就是if判断是2个=，一个=是赋值，两个=是判定，三个=要看是不是相同地址

前端小王hs
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
50-Js控制元素显示隐藏
qq_47462646的博客
01-16 313
4.一个按钮：显示--->(变成)隐藏，并实现相应的效果。1.使用style样式，两个按钮：显示按钮，隐藏按钮。2.style样式，一个按钮：显示/隐藏。3.利用开关实现显示或者隐藏。
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
javascript 控制 html元素 显示/隐藏实现代码
12-04
1。编写js函数 [removed] function display(y){$(y).style.display=($(y).style.display==”none”)?””:”none”;} function $(s){return document.getElementById(s);} [removed] 2. 要显示/隐藏的html元素加上 id 属性 控制这个tr的显示/隐藏 3，添加按钮，链接等触发 js 函数 <input type=”b
javascript点击按钮实现隐藏显示切换效果
01-21
本文实例分享了点击按钮实现隐藏和显示的切换代码，供大家参考，具体内容如下 效果图： 在不少应用中，都有这样的功能，点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此效果，代码如下: <html> <head> <meta charset=gb2312> <title>隐藏和显示</title> <style type=text/css> #thediv { width:200px; height:100px; line-height:100px; text-align:center; background-color:green;
使用JavaScript在单选按钮上显示/隐藏控件单击
04-05
使用JavaScript通过单选按钮选择显示/隐藏标签控件。
js点击按钮div显示隐藏
u010234868的专栏
06-12 7500
<input type="button" value="隐藏" id="btn"> <div id="box"></div> #box { width: 200px; height: 200px; background-color: red; } .show { display: block; } .hidden { display: none; } // 获取元素 var btn = document.getElementById('btn'); var
JavaScript控制元素（标签）的显示与隐藏
cnds123的专栏
12-24 1万+
JavaScript控制元素（标签）的显示与隐藏，有多种方式实现。
js如何将一个按钮显示或者隐藏
热门推荐
h_tinkinginjava的博客
10-19 5万+
关于一个元素的显示和隐藏有很多的方法，随便百度就可以找到办法，这边我就记录一下我是怎么显示和隐藏的，便于以后回顾。 需求是：当state为1和2时，按钮（id是plshbtn）就是隐藏起来；当state为0时，按钮就会显示。 js方法如下： if($("#state").val()==0){ $("#plshbtn").attr("style","display:block;"); }
【JavaScript】一个按钮控制显示隐藏（toggle）
咔咔博客
01-15 2977
author：咔咔 wechat：fangkangfk 需求： 点击这几个按钮，一个按钮可以控制显示和隐藏对应的input框 使用toggle即可
点击按钮，实现菜单的显示与隐藏
weixin_66157105的博客
05-17 188
隐藏之后，侧边栏的背景不变，是因为我们给侧边栏设置的宽度，想要动态的切换显示与隐藏，还想要背景跟着一起改变，可以通过三元表达式动态绑定width的值。
使用onclick改变元素的显示和隐藏
liuxu3557的博客
10-02 945
这个方法元素会消失不占据标准流中的位置，可以使用position将元素脱标使用。这两个方法隐藏以后还是占据了在标准流中的位置。这个方法只能触发一次不建议使用。
javascript显示隐藏层比较不错的方法分析
10-30
通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。
【JavaScript源代码】jQuery实现HTML元素隐藏和显示.docx
12-29
jQuery实现HTML元素隐藏和显示 　让我们来模仿一下淘宝网当你搜索某个商品的时候，那种显示全部品牌和显示部分品牌的功能。　首先我们来理清一下思路：　1、一开始需要先隐藏需要隐藏的元素　2、你需要通过jquery...
【前端】掌握按钮的显示与隐藏
山赶着山，山山漫漫结成关
06-02 1万+
在前端开发中，按钮的显示与隐藏效果是常见且重要的交互.有时候我们需要通过一些逻辑来控制按钮的显示或隐藏。下面就来介绍一些实现方式。//是否显示删除按钮通过CSS属性、JavaScript、前端框架等方法，我们可以实现按钮的显示与隐藏，提升用户界面的交互性和用户体验。根据项目需求和技术栈的不同，选择合适的方法来实现按钮的控制，使用户界面更加灵活和友好。
JavaScript基础|用原生实现button控制元素隐藏和显示
weixin_44240448的博客
07-21 2434
在网上找不到用if写按键的简单小代码，自己写一个
【JS】根据第一个单选框的值，来进行展示或隐藏第二个单选框
m0_46459413的博客
06-09 848
需求：两个单选框，当第一个单选框选择的是公路时，则第二个单选框显示；如果第一个单选框选择的是其它选项，则第二个单选框隐藏。jsp代码： 在css中增添隐藏样式： js代码： 在第一个单选框中根据用户选择的值，来控制第二个单选框是否进行隐藏...
一个小时学习javaScript
weixin_43064364的博客
04-20 937
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 589
官网代码（在取消选中状态的时候不生效）
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 1002
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
js实现点击显示和隐藏元素
04-07
可以使用JavaScript的DOM操作来实现点击显示和隐藏元素。具体实现可以通过获取需要操作的元素，添加点击事件监听器，然后在事件处理函数中切换元素的display属性来实现。例如： HTML代码： ``` <button id="toggleBtn">点击切换</button> <div id="target">这是需要切换显示和隐藏的元素</div> ``` JavaScript代码： ``` var toggleBtn = document.getElementById("toggleBtn"); var target = document.getElementById("target"); toggleBtn.addEventListener("click", function() { if (target.style.display === "none") { target.style.display = "block"; } else { target.style.display = "none"; } }); ``` 这样，当点击toggleBtn按钮时，target元素就会切换显示和隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小王hs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值