js--显示隐藏的功能
Posted 安文静
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js--显示隐藏的功能相关的知识，希望对你有一定的参考价值。
利用js基础写的显示隐藏功能。对于初次接触js的朋友们可能会有些帮助
点击按钮可以将红色区域隐藏掉，并且可以将按钮文字显示成显示。代码如下
<!DOCTYPE html> <!--文档声明--> <html lang="en"> <!--根节点--> <head><!--树枝节点--><!--父节点--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-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> <input id="btn" type="button" value="隐藏"> <div id="box"></div> ESlint 查询代码规范的工具 <script> //1 获取元素 var btn = document.getElementById(\'btn\'); var box = document.getElementById(\'box\'); var isshow = 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对象 // function fn(){ // console.log(this) // } // fn(); // 方法中的 this --> 是调用该方法的对象 // var obj = { // name = \'zs\', // say:function(){ // console.log(this); // } // } // obj.say(); //构造函数中的this -->当前对象 // 事件处理函数中的this --> 触发事件的对象事件源 </script> </body> </html>
以上是关于js--显示隐藏的功能的主要内容，如果未能解决你的问题，请参考以下文章