标签：nbsp tle NPU oct lse type inpu show 工具
利用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>
标签：nbsp tle NPU oct lse type inpu show 工具
原文地址：https://www.cnblogs.com/awjbky/p/12155621.html
