<!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. spring bean的重新加载

    架构体系 在谈spring bean的重新加载前,首先我们来看看spring ioc容器. spring ioc容器主要功能是完成对bean的创建.依赖注入和管理等功能,而这些功能的实现是有下面几个组 ...

  2. [转]搬瓦工换机房换ip之后不能连外网

    搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

  3. Sublime、Webstorm，还有CLI、Atom，这些开发工具的更新你清楚吗？

    APICloud App开发平台一直在不断升级开发工具库,这一年增加了众多开发工具.目的就是让开发者可以选择使用任何自己喜欢的HTML5开发工具去开发App. 那么2016年到现在,这些开发工具都有了 ...

  4. JSONModel对架构的影响及解决方案

    越来越多的项目使用CocoaPods,使用CocoaPods很有可能会用过JSONModel. JSONModel是个很强大的库,只要根据JSON定义好对应的类并继承JSONModel,就可以把JSO ...

  5. WLAN协议相关协议

    802.11协议 CAPWAP协议: RFC5415:https://tools.ietf.org/html/rfc5415 DTLS握手处理流程: RFC4347DTLS 认证: RFC5246 U ...

  6. C#下没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    C#下没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG)) 原因:没有原生支持64位,而是以32位兼容方式运行 解决办法:在项目属性里设置“生成” ...

  7. mysql dba系统学习（6）二进制日志binlog之二

    MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点.MySQL R ...

  8. VR原理讲解及开发入门

    本文是作者obuil根据多年心得专门为想要入门的VR开发者所写,由52VR网站提供支持.   1. VR沉浸感和交互作用产生的原理:   在之前,我们观看一个虚拟的创造内容是通过平面显示器的,52VR ...

  9. C++之路进阶——codevs3333（高级打字机）

    3333 高级打字机  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master     题目描述 Description 早苗入手了最新的高级打字机.最新款自然有着与 ...

  10. 使用Git、Git GUI和TortoiseGit

    1. 关于命令行 我一直建议在命令行中使用Git或者SVN.因为这样可能更加了解他们的工作方式,也不容易遗漏重要的问题和提醒. 在Windows习惯的驱使下,大多数人是不会看弹出的对话框中有什么信息的 ...