<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

#box{

width: 100px;

height: 100px;

background-color: #F0F;

display: none;

}

</style>

</head>

<script type="text/javascript">

window.onload=function(){

var oBtn=document.getElementById('btn');

var oDiv=document.getElementById('box');

oBtn.onclick=function(){

if(oDiv.style.display=='none'){

oDiv.style.display='block';

}else{

oDiv.style.display='none';

}

}

}/*if的判断条件找的是行间样式 现在行间样式是display:block; 所以第一次执行的是oDiv.style.display='none';正确做法 1. if(oDiv.style.display=='block'){

oDiv.style.display='none';

}else{

oDiv.style.display='block';

}

2. 把内部样式的display:none;改为 行间样式display:none; */

</script>

<body>

<input type="button" value="登陆" id="btn">

<div id="box"></div>

</body>

</html>

js显示隐藏的更多相关文章

  1. JS 显示隐藏DIV

    JS关闭DIV HTML <div id="bar1"> <p onclick="removeElement('bar1')">关闭&l ...

  2. 执行js，通过js显示隐藏的输入框，或者给input赋值

    在测试过程中,有些输入框是隐藏的,如果直接对他进行赋值,会找不到这个输入框,从而导致脚本运行失败. 例如下面的这个密码输入框: 登录密码输入框分为两个input,下面的是提示的,上面的才是真正存下来的 ...

  3. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  4. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

  5. 移动端右侧导航 显示隐藏js

    transform与fixed影响 html按钮 <span class="nav-btn"></span> <span class="cl ...

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

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

  7. 旁门左道通过JS与纯CSS实现显示隐藏层

    想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.

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

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

  9. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

随机推荐

  1. Mvc自定义路由让支持.html的格式

    前言 在大多时候,我们都需要自定义路由,当我们设置为/list/1.html的时候,有的时候会出现以下异常. routes.MapRoute( "category", // 路由名 ...

  2. 视觉机器学习读书笔记--------BP学习

    反向传播算法(Back-Propagtion Algorithm)即BP学习属于监督式学习算法,是非常重要的一种人工神经网络学习方法,常被用来训练前馈型多层感知器神经网络. 一.BP学习原理 1.前馈 ...

  3. C# 接口笔记

    /* 1. 实现多态的两种方式.             *    使用虚方法实现多态.             *    使用抽象方法实现多态.             *              ...

  4. oracle中merge方法

    先看SQL语句:merge into employee e using emps em on (e.emp_id=em.emp_id) when matched then  update set e. ...

  5. Webservice服务创建、调用笔记

    引言 以前使用windows服务,于是学习并记录下来:windows服务的创建.安装.调试全过程及引发的后续学习.现如今需要用到webservice,对此感觉到很困惑.经过几天的学习.查阅资料,终于大 ...

  6. Oracle同一数据库实例不同用户间的数据迁移

    1.目标用户登录,创建自我连接的DB LINK -- Create database link create public database link MYLINK connect to 原用户名 u ...

  7. 使用命令行 Subversion 访问项目源文件（SVN）

    from:http://www.open.collab.net/scdocs/ddUsingSVN_command-line.html.zh-cn 命令行 Subversion 入门 如果您参与的项目 ...

  8. kali 更改root密码

    sudo root passwd root 然后输入两次密码即可

  9. 使用flume-ng聚合双活Nginx日志

    前不久使用Keepalived搭建了Nginx双活代理服务器,以达到一个公网IP后支持多个云主机的多个域名网站的目的.完成后又想在这双活的Nginx上有所有访问网站的日志,之前有了解过Google A ...

  10. 五种常见的 PHP 设计模式

    设计模式 一书将设计模式引入软件社区,该书的作者是 Erich Gamma.Richard Helm.Ralph Johnson 和 John Vlissides Design(俗称 “四人帮”).所 ...