JS隐藏显示切换

利用js的dom操作元素样式

工具/材料

编辑器(txt也可以)

操作方法

声明temp变量达到开关效果

获取button和div的节点

btn点击的时候判断temp，如果temp等于true

div的样式就看不见

temp的值=取反 也就是这会temp = false

特别提示

注意temp的值没此判断后改变他，否则if不成立后续代码不执行

js隐藏和显示

JavaScript实例07 | 显示隐藏密码

题目：

JavaScript实现密码的显示和隐藏，如图所示。

思路：

密码显示和隐藏可以通过改变文本框的类型来实现。文本框类型为password时，密码会用黑点表示，类型为text时，以明文显示。

实现步骤：

由于这个题目比较简单，直接用JavaScript原生接口实现即可。

<div id="box"> <label for="pwd"> <img src="images/close.png" alt="" /> </label> <input type="password" name="pwd" id="pwd" /></div>

CSS代码如下。

#box { position: relative; width: 400px; border-bottom: 1px solid red; margin: 100px auto;}#box input { width: 370px; height: 30px; border: 0; outline: none;}#box img { position: absolute; right: 0px; top: 4px; width: 24px;}JavaScript代码

// 获取页面元素var img = document.querySelector("img");var pwd = document.querySelector("input");// 绑定单击事件处理函数img.onclick = function () { // 如果类型已经是password，则改成text，同时修改图片地址 if (pwd.type == "password") { pwd.type = "text"; this.src = "images/open.png"; } else { // 否则改成password，同时修改图片地址 pwd.type = "password"; this.src = "images/close.png"; }};

完工。