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. 用idea打包maven项目

    利用idea工具打包项目 1.点击图中标记①,idea会自动生成打包命令,这个打包命令会包含单元测试内容,如果单元测试的内容报错,是打包不成功的,这个时候我们需要在打包命令中用 -Dmaven.tes ...

  2. Centos7 Python2 升级到Python3

    1. 从Python官网到获取Python3的包, 切换到目录/usr/local/src wget https://www.python.org/ftp/python/3.7.2/Python-3. ...

  3. jquery的封装与对象学习

    1.封装学习 /// <reference path="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" /> ...

  4. 安装Logstash到linux(源码)

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:logstash-7.1.0 硬件要求:最低2核4GB 安装过程 1.源码安装JDK 1.1.从 ...

  5. 推荐15款Google Chrome 插件

    Google Chrome是由Google开发的免费网页浏览器.Chrome是化学元素“铬”的英文名称,过去也用Chrome称呼浏览器的外框.Chrome相应的开放源代码计划名为Chromium,而G ...

  6. PP: Meta-learning framework with applications to zero-shot time-series forecasting

    From: Yoshua Bengio Problem: time series forecasting. Supplementary knowledge: 1. what is meta-learn ...

  7. 03_TypeScript函数

    1.函数的定义 es5定义函数的方法 //函数声明法 function run(){ return 'run'; } //函数表达式 var run = function(){ return 'run ...

  8. 关于JavaScript的原型继承与原型链

    在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性 ...

  9. cenos7 安装samba

    1)安装samba应用# yum install samba samba-client2)启动Samba应用 systemctl start smb nmb3)Samba配置文件 /etc/samba ...

  10. Alice and Hairdresser

    Alice's hair is growing by leaps and bounds. Maybe the cause of it is the excess of vitamins, or may ...