JS显示隐藏功能怎么实现
导读：本文共1202字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：接下来，请跟着小编一起来学习吧！效果：点击按钮可以将红色区域隐藏掉，并且可以将按钮文字显示成显示。代码如下<!DOCTYPEhtml><!--文档声明--><htmllang="en"><!--根节点--><head><!--树枝节点--><!--父节点--><metacharset=... ...
目录
(为您整理了一些要点),点击可以直达。接下来，请跟着小编一起来学习吧！
效果：
点击按钮可以将红色区域隐藏掉，并且可以将按钮文字显示成显示。代码如下
<!DOCTYPEhtml><!--文档声明--><htmllang="en"><!--根节点-->若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
<head><!--树枝节点--><!--父节点-->
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title><!--子节点-->
</head>
<style>box{width:200px;height:200px;background-color:red;
}.hidden{display:none;
}.show{display:block;
}</style>
<body>
<inputid="btn"type="button"value="隐藏">
<divid="box"></div>
ESlint查询代码规范的工具<script>
//1获取元素
varbtn=document.getElementById('btn');varbox=document.getElementById('box');varisshow=true;//2给按钮注册点击事件
btn.onclick=function(){//当前box是显示隐藏
if(isshow){//3控制div的显示隐藏
box.className='hidden';//修改按钮上的文字
btn.value='显示';
isshow=false;
}else{//3控制div的显示隐藏
box.className='show';//修改按钮上的文字
//在事件处理函数中this--事件源触发事件的对象
btn.value='隐藏';
isshow=true;
}
};//函数中的this-->window对象
//functionfn(){
//console.log(this)
//}
//fn();
//方法中的this-->是调用该方法的对象
//varobj={
//name='zs',
//say:function(){
//console.log(this);
//}
//}
//obj.say();
//构造函数中的this-->当前对象
//事件处理函数中的this-->触发事件的对象事件源
</script>
</body></html>
JS显示隐藏功能怎么实现的详细内容，希望对您有所帮助，信息来源于网络。