JS点击显示隐藏密码

思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来。

1 if(DIV是显示的){
2 div.style.display='none';
3 }
4 else{
5 div.style.display='block';
6 }

代码:

style:

1 <style>
2 #text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
3 #menu{display:none;width:300px;height:100px;border:solid 1px #CCC;}
4 </style>

js:

<script type="text/javascript">
window.onload=function(){
var wenzi=document.getElementById('text');
var div=document.getElementById('menu');
wenzi.onfocus=function(){
if(div.style.display=='block'){ // == 判断div.display是否为显示
div.style.display='none'; //= 赋值也可了解成改变
}
else{
div.style.display='block';
}
}
};
</script>

html

<span id="text">点击显示菜单,再点击隐藏菜单</span>
<div id="menu">这是文字哦。</div>

JS点击显示隐藏内容的更多相关文章

  1. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  2. js点击显示隐藏

    这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...

  3. EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  4. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  6. js 控制div 显示隐藏的问题

    var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

  7. JS组件系列——显示隐藏密码切换的jQuery插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. js 事件点击 显示 隐藏

    <div style="position:absolute;left:40%;top:10%;border-style:dotted"> <img src=&qu ...

  9. 一款js点击显示和隐藏的例子(pc,移动端通用)

    html部分: <div id="box"> <div id="box_title">标题</div> <div id ...

随机推荐

  1. shadow文件中密码的加密方式

    1) 查看shadow文件的内容 cat /etc/shadow 可以得到shadow文件的内容,限于篇幅,我们举例说明: root:$1$Bg1H/4mz$X89TqH7tpi9dX1B9j5YsF ...

  2. 哈夫曼树 动态数组的使用vector

    问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, pn-1},用这列数构造Huffman树的过程如下: 1. ...

  3. Pycharm的项目文件名是红色的原因及解决办法

    今天在继续学习Python时,打开Pycharm后,发现有一个项目下的项目文件名是红色的,如下图: 刚开始我以为是我升级 Pycharm导致的,但我并没有急着去解决,因为并不会影响我执行代码等.当我修 ...

  4. Open Live Writer(olw)博客写作软件

    前言 wlw似乎不再提供下载了,从微软的官网下载安装程序之后,无法联网下载olw组件,所以写博客改用olw. olw是wlw的开源版本,所以wlw上的操作是可以在olw上继续使用的. 关于wlw的知识 ...

  5. 内网hash传递

    前言: 我们在平常打点的时候,遇到有内网或者有域的环境的时候,我们只获得了内网中的一台机子的shell,由这台机子我们可以获得这台机子所在的网段的相关其他主机.比如说有域的时候的域控机,有多层内网的堡 ...

  6. 题解【POJ1062】昂贵的聘礼

    题面 比较复杂的最短路模型转换. 我们考虑一种建图方式: 建立一个超级源点 \(S\),它向每一个节点连一条权值为那一个节点物品价值的边,表示直接购买那一个物品: 对于每一个节点,由它每一个可用的替代 ...

  7. WebGL_0001:3D页面的重置分辨率和横竖屏事件

    1,事件 重置分辩率事件 window.addEventListener("resize", a, !1) 横竖屏切换事件 window.addEventListener(&quo ...

  8. java - 并发集合 Vector、synchronizedCollection、CopyOnWriteArrayList之间的区别。

    概要 JDK中提供ArrayList集合方便我们对集合内元素进行增删改查,但是ArrayList为了能够在单线程中快速进行操作其设计并不支持多线程进行操作.ArrayList在多线程环境下可能会产生j ...

  9. yii2 分页

    基于数据提供者 public function actionIndex() { $page = Yii::$app->get('page', 0); $modelClass = $this-&g ...

  10. [Python]BeautifulSoup标签的遍历

    1.下行遍历 标签树的下行遍历.content 子节点列表,将tag所有儿子节点存入列表.children 子节点的迭代类型,与.contents类似用于循环遍历儿子节点.descendants 子孙 ...